Cordova相機插件使用

1.安裝插件

cordova plugin add cordova-plugin-camera

2. 在index.html中id爲app的標籤中

<button id="photograph">拍照</button>
<button id="getPhotograph">獲取照片</button>

3. navigator.camera.getPicture(success,fail,options)

3個參數 (成功時的回調函數，失敗時的回調函數，配置參數)

3.1配置成功和失敗時的回調函數

function success(imageData){
    // 成功的時候觸發 將獲取的圖片地址賦值給img.src顯示在頁面上
    // 將圖片路徑賦值給img標籤
    // 如果圖片返回的是文件的uri 則直接賦值給img.src就可以了 
    // 也就是說 如果destinationType:1或2 都是這樣
    let img=document.getElementById('myImg');
    img.src=imageData;
    // 如果圖片返回的是base64的編碼字符串  
    // 也就是說 如果destinationType:0 則是這樣
    // 則需要  img.src = "data:image/jpeg;base64," + imageData;
}
function fail(error){
    // 發生異常時觸發的事件
    alert('獲取照片失敗！')
}

3.2 在Cordova加載完成後 監聽按鈕點擊

拍照和從相冊獲取的區別就是 sourceType不同

// 需要在Cordova加載完成後添加事件 不僅僅是相機的事件 其他事件也一樣
document.addEventListener('deviceReady',function(){
	// 拍照按鈕點擊事件
    document.getElementById('photograph').onclick=function(){
        navigator.camera.getPicture(success,fail,{
            // 圖片質量 0~100
            quality:100,   
             
            // 圖片URI形式 
            // 常量使用：Camera.DestinationType.DATA_URL 
            // DATA_URL   或 0 返回base64編碼字符串
            // FILE_URI   或 1 返回圖片文件URI
            // NATIVE_URI 或 2 返回圖片本機URI
            destinationType:1,    
           
            // 圖片的來源
            // 常量使用：Camera.PictureSourceType.CAMERA
            // PHOTOLIBRARY    或 0 打開相冊
            // CAMERA          或 1 打開相機
            // SAVEDPHOTOALBUM 或 2 打開已保存的相冊
            sourceType:1,       
            
            // 圖片縮放寬度
            targetWidth:150,
            
            // 圖片縮放高度
            targetHeight:150,

            // 是否可以編輯圖片
            allowEdit:true,

            // 返回圖片的類型 有JPEG和PNG兩種
            // 常量使用：Camera.EncodingType.JPEG
            // JPEG 或 0 返回JPEG編碼圖像
            // PNG  或 1 返回PNG編碼圖片
            encodingType:0,

            // 是否校正圖片方向
            correctOrientation:true,

            // 可以選擇的媒體數據類型 
            // 常量使用：Camera.MediaType.VIDEO
            // PICTURE  或 0 僅允許選擇圖片。
            // VIDEO    或 1 僅允許視頻選擇。
            // ALLMEDIA 或 2 允許選擇所有媒體類型。
            mediaType:2,

            // 攝像頭的方向:前置與後置
            // 常量使用: Camera.Direction.BACK
            // FRONT 或 0 前置攝像頭。
            // BACK  或 1 後置攝像頭
            cameraDirection:1,
            
            // 是否保存到相冊
            saveToPhotoAlbum:true,
        })
    }
    // 獲取照片按鈕點擊事件 
    document.getElementById('getPhotograph').onclick=function(){
        navigator.camera.getPicture(success,fail,{
            quality:100,
            destinationType:0,
            sourceType:0,
            allowEdit:true,
        })
    }
})