5. Cordova照相机和阶段性分析

阶段性分析

第一阶段，入门。

第二阶段，到这里自我感觉算是差不多基本入门了，接下来打算做一些常用API练习，就比如这个插件主要用于拍照或使用图库文件，还有一些文件操作，IO之类的，计划一周左右实现。

第三阶段，对DB还有原生交互兼容性等进行深入研究，解决一些碰到的问题，此阶段不设时长，预计此阶段会有项目，所以切换到下班回去做。

第四阶段，如果时间还比较充裕的话，打算制作一款HybridAPP软件，在Android，IOS上都能跑通的(前提是有OSX环境)，预计10个工作日左右吧。

Cordova照相机

用于拍照或使用图库文件

添加插件

cordova plugin add cordova-plugin-camera

添加按钮

<button id = "takePicture">TAKE PICTURE</button>
<button id = "getPicture">TAKE PICTURE</button>
<img id = "myImage" class="imgcenter" src="img/image.png"/>

我这里有点小问题，照片会很大，超出屏幕了，用css设置一下

.imgcenter{
align-content: center;
width:100%;
height:90%;
}

添加事件监听器

//拍照监听器
document.getElementById("takePicture").addEventListener("click", cameraTakePicture);
//图库监听器
document.getElementById("getPicture").addEventListener("click",cameraGetPicture);

添加功能

//执行相机操作的函数，调用了成功和失败两个回调函数
function cameraTakePicture() {navigator.camera.getPicture(onSuccess, onFail, {//照片质量quality: 50,//照片类型destinationType: Camera.DestinationType.DATA_URL//保存到相册saveToPhotoAlbum: true});
//成功的回调函数，如果成功就更新到img
function onSuccess(imageData) {var image = document.getElementById('myImage');image.src = "data:image/jpeg;base64," + imageData;}
//如果失败就更新失败原因
function onFail(message) {alert('Failed because: ' + message);}
}
//获取图库的回调函数，只是多了一个sourceType参数
function cameraGetPicture(){navigator.camera.getPicture(onSuccess, onFail, { quality: 50,destinationType: Camera.DestinationType.DATA_URL,//下面这两个方法都可以获取到相册，这也是和获取相机唯一的区别//sourceType: Camera.PictureSourceType.PHOTOLIBRARYsourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM});function onSuccess(imageData) {var image = document.getElementById('myImage');image.src = "data:image/png;base64," + imageData;}function onFail(message) {alert('Failed because: ' + message);}}

问题
1. 我更新插件的时候提示cordova-plugin-compat无法更新，这时候卸载了再执行添加相机插件，cordova会自动更新最新版的compat插件
2. 卸载compat组件的时候，如果提示有依赖，无法卸载，就把依赖的先卸载了，然后在卸载
3. 当然这不是最优解决方案，因为刚配置环境的时候我没有卸载自带的，所以才会出现这些问题，导致compat无法更新，所以配置好环境的时候，如果有组件的话，先卸载了，用到哪些装哪些即可，毕竟这些库都会占内存
展示

!
![Uploading final_832690.png …]

主要方法

参数	说明
quality	在0-100的范围内的图像质量。默认值是50
destinationType	DATA_URL 或 0 返回base64编码字符串 FILE_URI 或 1 返回图像文件URI NATIVE_URI 或 2 返回图像本地URI
sourceType	PHOTOLIBRARY 或 0 打开照片库 CAMERA 或 1 打开机摄像头 SAVEDPHOTOALBUM 或 2 打开保存相册
allowEdit	允许图像编辑
encodingType	JPEG 或 0 返回JPEG编码的图像 PNG 或 1 返回PNG编码的图像
targetWidth	图像中的像素缩放宽度
targetHeight	图像中的像素比例的高度
mediaType	PICTURE 或 0 只允许选择照片 VIDEO 或 1 只允许选择视频 ALLMEDIA 或 2 允许选择所有媒体类型
correctOrientation	用于校正图象的方向
saveToPhotoAlbum	用于将图像保存到相册
popoverOptions	用于在IOS设置弹出的位置
cameraDirection	FRONT 或 0 前置摄像头 BACK 或 1 后置摄像头 ALLMEDIA所有媒体