ionic3 html调用摄像头,Ionic系列—调用摄像头拍照和选择图库照片功能的实现

周周复年年

于 2021-06-04 15:48:46 发布

阅读量360

点赞数

文章标签： ionic3 html调用摄像头

本文详细介绍了如何在移动应用中使用Cordova Camera插件进行摄像头拍照并上传图片，包括设置参数、保存照片、编辑功能及兼容性问题。特别探讨了sourceType和destinationType的选择，以及如何实现拍照后选择图库功能的优化。

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

1、需求描述

最近要做一个功能就是调用摄像头拍照，然后上传照片的功能，或者直接打开图库选择照片然后上传。

2、准备

①、添加插件$cordovaCamera

cordova plugin add cordova-plugin-camera

②、在controller中添加依赖

3、代码实现

$scope.takePhoto = function() {

var options = {

//这些参数可能要配合着使用，比如选择了sourcetype是0，destinationtype要相应的设置

quality: 100,

//相片质量0-100

destinationType: Camera.DestinationType.FILE_URI,

//返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI (例如，資產庫)

sourceType: Camera.PictureSourceType.CAMERA,

//从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库

allowEdit: false,

//在选择之前允许修改截图

encodingType: Camera.EncodingType.JPEG,

//保存的图片格式： JPEG = 0, PNG = 1

targetWidth: 200,

//照片宽度

targetHeight: 200,

//照片高度

mediaType: 0,

//可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。

cameraDirection: 0,

//枪后摄像头类型：Back= 0,Front-facing = 1

popoverOptions: CameraPopoverOptions,

saveToPhotoAlbum: true //保存进手机相册

};

$cordovaCamera.getPicture(options).then(function(imageData) {

CommonJs.AlertPopup(imageData);

var image = document.getElementById('myImage');

image.src = imageData;

//image.src = "data:image/jpeg;base64," + imageData;

function(err) {

// error

CommonJs.AlertPopup(err.message);

});

};

4、几点说明

①如果要保存照片，需要设置destinationType是返回图像路径，然后设置saveToPhotoAlbum: true，这两个参数都设置才能保存照片,我发现如果设置了长和宽保存的照片质量会很差，去掉的画质量不错。但我android会默认存到

file://storage/sdcard0/Pictures中，我手机相册没识别出来。而且这个时候虽然设置allowEdit: true，但是返回来的是源文件的路径，这个剪裁功能等于没有用。

②如果要截取图片，要设置allowEdit: true，设置长和宽，并且destinationType返回的是base64位编码字符串。

③当设置sourceType: Camera.PictureSourceType.CAMERA时，这个时候的选择图库的界面很难看，需要设置sourceType为0或者2这个时候调用的就是系统的图库，好看点。所以我们实现拍照，然后在拍照的成功回调中调用打开相册选择图片，效果会好一点。

④长和宽的设置只影响剪裁框的大小，也就是如果返回base64会影响图片的大小，返回uri不会影响。

⑤设置成png比jpg的效果还差。

⑥当我设置Camera.DestinationType.NATIVE_URI，剪裁的时候返回以前照的同一张照片，但是放在image标签中的照片是最新的。后来我发现是这个问题导致的encodingType:Camera.EncodingType.PNG。

⑦这句话别人说是清理缓存用的，具体实现没用过，以后再研究吧

$cordovaCamera.cleanup().then(...); // only for FILE_URI

⑧之后我会完善博客内容，当选择上传的时候弹出一个actionsheet，里面有选择图库，拍照等选项。上传的话可以直接把base64编码字符串直接传到后台处理，也可以用angular的上传，也可以用cordova-tranfer.

⑨调用前置摄像头一直不成功，只能手动切换。

5、(补充)头像图片圆形裁剪样式(border-radius: 50%)

![]({{modifyPersonImg}})

6、参考文章