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

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

二,安裝Cordoba的相機插件html5

一、在文件目錄下,使用命令安裝相機插件,命令以下:app

cordova plugin add cordova-plugin-camera

 二、使用」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 設置要從中選擇的媒體類型。只有看成品PictureSourceTypePHOTOLIBRARY或者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 使用前置攝像頭

 例子:ui

// 打開相機
    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;
    },
相關文章
相關標籤/搜索