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

阶段性分析

第一阶段，入门。

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

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

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

Cordova照相机

用于拍照或使用图库文件

• 添加插件

  cordova plugin add cordova-plugin-camera
  

• 添加按钮

  TAKE PICTURE
  TAKE PICTURE
  ![](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.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无法更新，所以配置好环境的时候，如果有组件的话，先卸载了，用到哪些装哪些即可，毕竟这些库都会占内存

• 展示

failed.png

![Uploading final_832690.png . . .]

final.png

getpicture.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所有媒体