Cordova - 使用Cordova開發iOS應用實戰4（調用攝像頭拍照，並編輯）

時間 2019-11-11

標籤 cordova 使用開發 ios 應用實戰調用攝像頭拍照編輯欄目 Cordova 简体版

原文原文鏈接

使用Cordova能夠很方便的經過js代碼來使用設備攝像頭拍照，只需把camera插件添加進來便可。

一，添加camera插件

首先咱們要在「終端」中進入工程所在的目錄，而後運行以下命令：

 
         cordova plugin add cordova-plugin-camera

能夠看到camera相機插件已經成功添加了：

原文:Cordova - 使用Cordova開發iOS應用實戰4（調用攝像頭拍照，並編輯）

二，調用設備攝像頭

1，拍照

下面樣例會調用手機攝像頭拍照（能夠切換前置、後置攝像頭），同時拍照完畢後會把照片在頁面上顯示出來。

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head> 
        
         <title>Capture Photo</title> 
        
         <meta http-equiv= 
         "Content-type" 
         content= 
         "text/html; charset=utf-8" 
         > 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         src= 
         "cordova.js" 
         ></script> 
        
         <script type= 
         "text/javascript" 
         charset= 
         "utf-8" 
         > 
        
         var 
         destinationType; 
        
         document.addEventListener( 
         "deviceready" 
         ,onDeviceReady, 
         false 
         ); 
        
         //Cordova加載完成會觸發 
        
         function 
         onDeviceReady() { 
        
         destinationType=navigator.camera.DestinationType; 
        
         } 
        
         //拍照 
        
         function 
         capturePhoto() { 
        
         //拍照並獲取Base64編碼的圖像（quality : 存儲圖像的質量，範圍是[0,100]） 
        
         navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, 
        
         destinationType: destinationType.DATA_URL } 
        
         ); 
        
         } 
        
         //拍照成功 
        
         function 
         onPhotoDataSuccess(imageData) { 
        
         console.log(imageData); 
        
         var 
         smallImage = document.getElementById( 
         'smallImage' 
         ); 
        
         smallImage.style.display =  
         'block' 
         ; 
        
         smallImage.src =  
         "data:image/jpeg;base64," 
         + imageData; 
        
         } 
        
         //拍照失敗 
        
         function 
         onFail(message) { 
        
         alert( 
         '拍照失敗: ' 
         + message); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "capturePhoto();" 
         >拍攝照片</button> <br> 
        
         <img style= 
         "display:none;width:240px;height:320px;" 
         id= 
         "smallImage" 
         src= 
         "" 
         /> 
        
         </body> 
        
         </html>

2，拍照並進行編輯
拍攝照片後咱們還能夠進行簡單的編輯，只要把 allowEdit 參數設爲 true 便可。
下面樣例能夠看到，拍照完畢後會先進入編輯界面。上面有個正方形進行框，經過拖拽、縮放照片能夠將其裁剪爲正方形的圖片（這個對須要使用正方形圖片的場合比較有用，好比用戶頭像）。

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <title>Capture Photo</title> 
         
          <meta http-equiv= 
          "Content-type" 
          content= 
          "text/html; charset=utf-8" 
          > 
         
          <script type= 
          "text/javascript" 
          charset= 
          "utf-8" 
          src= 
          "cordova.js" 
          ></script> 
         
          <script type= 
          "text/javascript" 
          charset= 
          "utf-8" 
          > 
         
          var 
          destinationType; 
         
          document.addEventListener( 
          "deviceready" 
          ,onDeviceReady, 
          false 
          ); 
         
          //Cordova加載完成會觸發 
         
          function 
          onDeviceReady() { 
         
          destinationType=navigator.camera.DestinationType; 
         
          } 
         
          //拍照並編輯 
         
          function 
          capturePhotoEdit() { 
         
          //拍照並獲取Base64編碼的圖像（quality : 存儲圖像的質量，範圍是[0,100]） 
         
          //allowEdit: true 拍照完畢後容許簡單編輯 
         
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, 
         
          allowEdit:  
          true 
          , 
         
          destinationType: destinationType.DATA_URL }); 
         
          } 
         
          //拍照成功 
         
          function 
          onPhotoDataSuccess(imageData) { 
         
          console.log(imageData); 
         
          var 
          smallImage = document.getElementById( 
          'smallImage' 
          ); 
         
          smallImage.style.display =  
          'block' 
          ; 
         
          smallImage.src =  
          "data:image/jpeg;base64," 
          + imageData; 
         
          } 
         
          //拍照失敗 
         
          function 
          onFail(message) { 
         
          alert( 
          '拍照失敗: ' 
          + message); 
         
          } 
         
          </script> 
         
          </head> 
         
          <body style= 
          "padding-top:50px" 
          > 
         
          <button style= 
          "font-size:23px;" 
          onclick= 
          "capturePhotoEdit();" 
          >拍照並編輯</button> <br> 
         
          <img style= 
          "display:none;width:240px;height:240px;" 
          id= 
          "smallImage" 
          src= 
          "" 
          /> 
         
          </body> 
         
          </html>