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>

原文出自：www.hangge.com 转载请保留原文连接：http://www.hangge.com/blog/cache/detail_1146.html