Ionic系列——調用攝像頭拍照和選擇圖庫照片功能的實現


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.

    ⑨調用前置攝像頭一直不成功,只能手動切換


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM