Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）

时间 2019-11-11

标签 cordova 使用开发 ios 应用实战获取手机照片编辑栏目 Cordova 繁體版

原文原文链接

使用Cordova能够很方便的经过js代码读取系统相簿里面的照片，同使用设备摄像头拍照同样，一样须要先添加camera插件。

一，添加camera插件

首先咱们要在“终端”中进入工程所在的目录，而后运行以下命令：

 
         cordova plugin add cordova-plugin-camera

能够看到camera相机插件已经成功添加了：

原文:Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）

二，获取照片

咱们能够选择是从“照片库（时刻）”中读取图片，或者从“相簿”中读取图片。

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 
         pictureSource; 
        
         var 
         destinationType; 
        
         document.addEventListener( 
         "deviceready" 
         ,onDeviceReady, 
         false 
         ); 
        
         //Cordova加载完成会触发 
        
         function 
         onDeviceReady() { 
        
         pictureSource=navigator.camera.PictureSourceType; 
        
         destinationType=navigator.camera.DestinationType; 
        
         } 
        
         //获取照片 
        
         function 
         getPhoto(source) { 
        
         //quality : 图像的质量，范围是[0,100] 
        
         navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        
         destinationType: destinationType.FILE_URI, 
        
         sourceType: source }); 
        
         } 
        
         //获取照片成功 
        
         function 
         onPhotoURISuccess(imageURI) { 
        
         //打印出照片路径 
        
         console.log(imageURI); 
        
         var 
         largeImage = document.getElementById( 
         'largeImage' 
         ); 
        
         largeImage.style.display =  
         'block' 
         ; 
        
         largeImage.src = imageURI; 
        
         } 
        
         //获取照片是吧 
        
         function 
         onFail(message) { 
        
         alert( 
         '获取失败: ' 
         + message); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "getPhoto(pictureSource.PHOTOLIBRARY);" 
         > 
        
         从“相簿”中获取照片 
        
         </button> <br> 
        
         <img style= 
         "display:none;" 
         id= 
         "largeImage" 
         src= 
         "" 
         /> 
        
         </body> 
        
         </html>

2，从“照片库（时刻）”中获取照片

 
         <!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 
         pictureSource; 
        
         var 
         destinationType; 
        
         document.addEventListener( 
         "deviceready" 
         ,onDeviceReady, 
         false 
         ); 
        
         //Cordova加载完成会触发 
        
         function 
         onDeviceReady() { 
        
         pictureSource=navigator.camera.PictureSourceType; 
        
         destinationType=navigator.camera.DestinationType; 
        
         } 
        
         //获取照片 
        
         function 
         getPhoto(source) { 
        
         //quality : 图像的质量，范围是[0,100] 
        
         navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        
         destinationType: destinationType.FILE_URI, 
        
         sourceType: source }); 
        
         } 
        
         //获取照片成功 
        
         function 
         onPhotoURISuccess(imageURI) { 
        
         //打印出照片路径 
        
         console.log(imageURI); 
        
         var 
         largeImage = document.getElementById( 
         'largeImage' 
         ); 
        
         largeImage.style.display =  
         'block' 
         ; 
        
         largeImage.src = imageURI; 
        
         } 
        
         //获取照片是吧 
        
         function 
         onFail(message) { 
        
         alert( 
         '获取失败: ' 
         + message); 
        
         } 
        
         </script> 
        
         </head> 
        
         <body style= 
         "padding-top:50px" 
         > 
        
         <button style= 
         "font-size:23px;" 
         onclick= 
         "getPhoto(pictureSource.SAVEDPHOTOALBUM);" 
         > 
        
         从“时刻”中获取照片 
        
         </button> <br> 
        
         <img style= 
         "display:none;" 
         id= 
         "largeImage" 
         src= 
         "" 
         /> 
        
         </body> 
        
         </html>

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