Cordova各個插件使用介紹系列（八）—$cordovaCamera篩選手機圖庫圖片並顯示

原文檔請看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/

1.首先下載這個插件：

能夠在package.json文件中添加「cordova-plugin-device"來添加，也能夠直接在ngCordova官網裏找到相應的命令來下載，

命令爲：

cordova plugin add cordova-plugin-camera

2.在ionic項目中要使用這個插件的頁面相應的控制器裏添加相應的插件名來引用，記得在依賴項裏要加ngCordova,否則會出錯。

3.在控制器裏寫入相應的js代碼（這些代碼在ngCordova官網插件的應用上有詳細的方法調用，根據具體的須要來寫本身所須要的功能的代碼）我這個代碼是來實現頁面上要顯示7張從手機相冊中選擇的圖片，

js代碼以下：

 

$scope.takePicture = function (img) {
    var options = {
        quality: 75,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 500,
        targetHeight: 500,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false
};

    $cordovaCamera.getPicture(options).then(function (imageData) {
            // alert(imageData);
if (img == 1) {
                $scope.data.IDCardImage1 = imageData;
                $scope.imgURI1 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 2) {
                $scope.data.IDCardImage2 = imageData;
                $scope.imgURI2 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 3) {
                $scope.data.Qualified = imageData;
                $scope.imgURI3 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 4) {
                $scope.data.CredentialImage = imageData;
                $scope.imgURI4 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 5) {
                $scope.data.CarInfoImage1 = imageData;
                $scope.imgURI5 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 6) {
                $scope.data.CarInfoImage2 = imageData;
                $scope.imgURI6 = "data:image/jpeg;base64," + imageData;
            }
            if (img == 7) {
                $scope.data.CarInfoImage3 = imageData;
                $scope.imgURI7 = "data:image/jpeg;base64," + imageData;
            } else {
                return "";
            }
        }
    );
};
$scope.take = function () {
    this.takePicture();
}

　　

4.html頁面的代碼以下（其中ng-src中要把圖片轉化爲base64格式，上傳到服務器）我這裏只貼出了顯示兩張圖片的代碼，其餘的相似：

 

<div class="row">
    <div class="col padding" ng-click="takePicture(1)">
        <img ng-src="data:image/jpeg;base64,{{data.IDCardImage1}}"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
    </div>
    <div class="col padding" ng-click="takePicture(2)">
        <img ng-src="data:image/jpeg;base64,{{data.IDCardImage2}}"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
    </div>
    <div class="col padding"></div>
</div>

　　

注：第一次在這裏分享本身遇到的問題和解決方案，有不足的地方歡迎你們糾正、評論以及提問，有更多精彩技術分享會一直更新http://www.ncloud.hk/