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.
⑨調用前置攝像頭一直不成功,只能手動切換