階段性分析

第一階段，入門吧雹。

第二階段骨杂，到這里自我感覺算是差不多基本入門了，接下來打算做一些常用API練習雄卷，就比如這個插件主要用于拍照或使用圖庫文件搓蚪，還有一些文件操作，IO之類的龙亲，計劃一周左右實現陕凹。

第三階段悍抑，對DB還有原生交互兼容性等進行深入研究鳄炉，解決一些碰到的問題，此階段不設時長搜骡，預計此階段會有項目拂盯，所以切換到下班回去做。

第四階段记靡，如果時間還比較充裕的話谈竿，打算制作一款HybridAPP軟件，在Android摸吠，IOS上都能跑通的(前提是有OSX環(huán)境)空凸，預計10個工作日左右吧。

Cordova照相機

用于拍照或使用圖庫文件

• 添加插件

  cordova plugin add cordova-plugin-camera
  

• 添加按鈕

  <button id = "takePicture">TAKE PICTURE</button>
  <button id = "getPicture">TAKE PICTURE</button>
  ![](img/image.png)
  

  我這里有點小問題寸痢，照片會很大呀洲，超出屏幕了，用css設置一下

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

• 添加事件監(jiān)聽器

  //拍照監(jiān)聽器
  document.getElementById("takePicture").addEventListener("click", cameraTakePicture);
  //圖庫監(jiān)聽器
  document.getElementById("getPicture").addEventListener("click",cameraGetPicture);
  

• 添加功能

  //執(zhí)行相機操作的函數啼止，調用了成功和失敗兩個回調函數
  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,
      //下面這兩個方法都可以獲取到相冊献烦，這也是和獲取相機唯一的區(qū)別
      //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無法更新滓窍，這時候卸載了再執(zhí)行添加相機插件，cordova會自動更新最新版的compat插件
  2. 卸載compat組件的時候巩那，如果提示有依賴吏夯，無法卸載此蜈，就把依賴的先卸載了，然后在卸載
  3. 當然這不是最優(yōu)解決方案锦亦，因為剛配置環(huán)境的時候我沒有卸載自帶的舶替，所以才會出現這些問題，導致compat無法更新杠园，所以配置好環(huán)境的時候顾瞪，如果有組件的話，先卸載了抛蚁，用到哪些裝哪些即可陈醒，畢竟這些庫都會占內存

• 展示

failed.png

![Uploading final_832690.png . . .]

final.png

getpicture.png

主要方法