使用cordova，使html5也能像IOS，Android那樣可以 調取手機的相機拍照功能

一，我們在使用html5的技術開發手機app時，並不能像IOS，Android那樣可以調取手機原生的相機功能，這是我們就要借助一些插件來時實現。

二，安裝Cordoba的相機插件

1、在文件目錄下，使用命令安裝相機插件，命令如下：

cordova plugin add cordova-plugin-camera

 2、使用”camera.getPicture“函數來調取相機

camera.getPicture(successCallback, errorCallback, options)

successCallback相機調取成功的回調函數。

errorCallback相機調取失敗的回調函數。

options：相機參數設置。參數如下表：

名稱	類型	默認	描述
質量	number	50	保存的圖像的質量，表示為0-100的范圍，其中100通常是全分辨率，沒有文件壓縮損失。（請注意，關於相機分辨率的信息不可用。）
destinationType	DestinationType	FILE_URI	選擇返回值的格式。
sourceType的	PictureSourceType	CAMERA	設置圖片的來源。
allowEdit	Boolean	true	選擇前允許簡單編輯圖像。
編碼類型	EncodingType	JPEG	選擇返回的圖像文件的編碼。
targetWidth	number		以像素為單位的縮放圖像的寬度 必須與...一起使用targetHeight。長寬比保持不變。
targetHeight	number		以像素為單位的高度縮放圖像。必須與...一起使用targetWidth。長寬比保持不變。
媒體類型	MediaType	PICTURE	設置要從中選擇的媒體類型。只有當作品PictureSourceType是PHOTOLIBRARY或者SAVEDPHOTOALBUM。
correctOrientation	Boolean		捕捉期間旋轉圖像以糾正設備的方向。
saveToPhotoAlbum	Boolean		捕獲后將圖像保存到設備上的相冊中。
popoverOptions	CameraPopoverOptions		指定iPad中彈出位置的僅iOS選項。
cameraDirection	Direction	BACK	選擇要使用的相機（正面或背面）。

相機參數配置屬性如下：

Camera.DestinationType （文件類型）：屬性值如下，

Name	Type	Default	Description
DATA_URL	number	0	返回base64編碼的字符串。數據URL可能會占用大量內存，導致應用程序崩潰或內存不足錯誤。如果可能，請使用FILEURI或NATIVE_URI
FILE_URI	number	1	返回文件uri（內容：// media / external / images / media / 2 for Android）
NATIVE_URI	number	2	返回本地uri（例如，asset-library://... for iOS）

Camera.EncodingType （圖片類型設置）: 屬性值如下，

Name	Type	Default	Description
JPEG	number	0	返回JPEG編碼的圖像
PNG	number	1	返回PNG編碼的圖像

Camera.MediaType（媒體類型設置） : 屬性值如下，

Name	Type	Default	Description
PICTURE	number	0	只允許選擇靜止圖像。默認。將返回通過DestinationType指定的格式
VIDEO	number	1	只允許選擇視頻，只返回網址
ALLMEDIA	number	2	允許從所有媒體類型中選擇

Camera.PictureSourceType （圖片來源設置）: 屬性值如下，

Name	Type	Default	Description
PHOTOLIBRARY	number	0	從圖片庫中選擇圖片（與Android的SAVEDPHOTOALBUM相同）
CAMERA	number	1	從相機拍照
SAVEDPHOTOALBUM	number	2	從圖片庫中選擇圖片（與Android的PHOTOLIBRARY相同）

Camera.PopoverArrowDirection（匹配iOS UIPopoverArrowDirection常量以指定彈出窗口上的箭頭位置。） : 屬性值如下，

Name	Type	Default
ARROW_UP	number	1
ARROW_DOWN	number	2
ARROW_LEFT	number	4
ARROW_RIGHT	number	8
ARROW_ANY	number	15

Camera.Direction （相機攝像頭設置）: 屬性值如下，

Name	Type	Default	Description
BACK	number	0	使用背面照相機
FRONT	number	1	使用前置攝像頭

 例子：

// 打開相機
    openCamera: function (selection) {
        var srcType = Camera.PictureSourceType.CAMERA;  // 只能從相機里取
        var cameraOptions = uploadCtrl.setOptions(srcType);  // 配置參數函數
        navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, cameraOptions);
    },
    // 從相冊獲取圖片
    openFilePicker(selection){
        var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
        var pickerOptions = uploadCtrl.setOptions(srcType);
        navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, pickerOptions);
    },
    // 相機調取成功成功
    cameraSuccess(imageUri){
        // console.log('調取成功')
        uploadCtrl.createImg(imageUri);
    },
    // 相機調取失敗
    cameraError(error){
        $$('.page[data-page="upload"] .imgUpload-overlay').removeClass('imgUpload-overlay-active'); // 選擇器打開，遮罩層打開
        var obj =$$('.page[data-page="upload"]').find('.'+uploadCtrl.imgType);
        var index = uploadCtrl.imgType.substr(4);
        uploadCtrl.uploadTypeCondition[index].hasImg = false;
        obj.find('.img-item').removeClass('no');   // 上傳模塊隱藏
        obj.find('.has-img').addClass('no');  
        if(error !=='Camera cancelled.' && error !=='no image selected' && error !=='Selection cancelled.'){  // 相機取消
            myApp.alert('<span class="alertTip">'+error+'</span>',['']);
        }
    },
    // 相機參數配置
    setOptions(srcType){
        var options = {
            quality: 60,
            destinationType: Camera.DestinationType.FILE_URI,//圖片的base64編碼
            sourceType: srcType,
            encodingType: Camera.EncodingType.jpg,
            mediaType: Camera.MediaType.PICTURE,
            allowEdit: false,
            correctOrientation: true, //Corrects Android orientation quirks
            saveToPhotoAlbum:false,  // 不允許保存
        };
        return options;
    },