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,
        })
    }
})