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    });//成功的回调函数，如果成功就更新到imgfunction 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.PHOTOLIBRARY     sourceType: 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所有媒体