ionic项目之ngcordova插件之camera

最新推荐文章于 2019-01-18 09:04:27 发布

金龙lp

最新推荐文章于 2019-01-18 09:04:27 发布

阅读量532

点赞数

本文介绍了如何利用ngCordova插件实现移动端应用中的拍照功能。详细讲述了两种获取照片的方法：一是通过DataURL获取Base64编码的照片数据；二是通过FILE_URI获取照片文件的实际存储路径。并分享了实践过程中遇到的问题及解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://github.com/driftyco/ng-cordova

http://ngcordova.com/docs/plugins/camera/

官方解释是既可以用来拍照也可以录视频（只试用了拍照功能）

首先，装插件 cordova plugin add org.apache.cordova.camera

然后，如果之前配置过ngcordova的话，就直接在控制器加上$cordovaCamera就好了

有两种方法获取拍照得到的图片

1，拍照返回64位的图片数据（destinationType: Camera.DestinationType.DATA_URL）

2，拍照返回图片文件的实际存储地址（destinationType: Camera.DestinationType.FILE_URI）

1，拍照返回64位的图片数据（成功了，可是图片数据即使100%的质量也很不清晰）

[javascript]view plaincopy 
    
 var options = {  
       quality: 50,  
       destinationType: Camera.DestinationType.DATA_URL,  
       sourceType: Camera.PictureSourceType.CAMERA,  
       allowEdit: true,  
       encodingType: Camera.EncodingType.JPEG,  
       targetWidth: 100,  
       targetHeight: 100,  
       popoverOptions: CameraPopoverOptions,  
       saveToPhotoAlbum: false  
     };  
   
     $cordovaCamera.getPicture(options).then(function(imageData) {  
       var image = document.getElementById('myImage');  
       image.src = "data:image/jpeg;base64," + imageData;  
     }, function(err) {  
       // error  
     });  

2，拍照返回图片文件的实际存储地址（实验不成功，暂没找到问题）

[javascript]view plaincopy 
    
 var options = {  
       destinationType: Camera.DestinationType.FILE_URI,  
       sourceType: Camera.PictureSourceType.CAMERA,  
     };  
   
     $cordovaCamera.getPicture(options).then(function(imageURI) {  
       var image = document.getElementById('myImage');  
       image.src = imageURI;  
     }, function(err) {  
       // error  
     });  
   
   
     $cordovaCamera.cleanup().then(...); // only for FILE_URI  

把这句话去了就正常了(暂时没看到这句话有什么影响) $cordovaCamera.cleanup().then(...); // only for FILE_URI

返回的图片地址信息为（file:///storage/emulated/0/DCIM/Camera/pic.jpg） 与选取图片文件插件方法返回的图片地址（data/data下） 不一样