1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ionic系列——调用摄像头拍照和选择图库照片功能的实现

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

时间:2022-04-18 17:00:32

相关推荐

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

独角兽企业重金招聘Python工程师标准>>>

1、需求描述

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

2、准备

①、添加插件$cordovaCamera

cordovapluginaddcordova-plugin-camera

②、在controller中添加依赖

3、代码实现

$scope.takePhoto=function(){varoptions={//这些参数可能要配合着使用,比如选择了sourcetype是0,destinationtype要相应的设置quality:100,//相片质量0-100destinationType: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=1targetWidth:200,//照片宽度targetHeight:200,//照片高度mediaType:0,//可选媒体类型:圖片=0,只允许选择图片將返回指定DestinationType的参数。視頻格式=1,允许选择视频,最终返回FILE_URI。ALLMEDIA=2,允许所有媒体类型的选择。cameraDirection:0,//枪后摄像头类型:Back=0,Front-facing=1popoverOptions:CameraPopoverOptions,saveToPhotoAlbum:true//保存进手机相册};$cordovaCamera.getPicture(options).then(function(imageData){CommonJs.AlertPopup(imageData);varimage=document.getElementById('myImage');image.src=imageData;//image.src="data:image/jpeg;base64,"+imageData;},function(err){//errorCommonJs.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(...);//onlyforFILE_URI

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。