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

一、需求描述

    最近要作一個功能就是調用攝像頭拍照，而後上傳照片的功能，或者直接打開圖庫選擇照片而後上傳。

二、準備

    ①、添加插件$cordovaCamera

cordova plugin add cordova-plugin-camera

    ②、在controller中添加依賴

三、代碼實現

$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);
    });

};

四、幾點說明

    ①若是要保存照片，須要設置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.

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