Cordova照相機

第1步 - 安裝照相機外掛

D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-camera

第2步 - 新增按鈕和圖象

在這一步中，我們將呼叫影象顯示一次拍攝的攝像頭和影象建立按鈕。這將被新增到的 index.html 的 div class = "app" 元素中。

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

第3步 - 新增事件監聽器

document.getElementById("cameraTakePicture").addEventListener
   ("click", cameraTakePicture);	

第4步 - 新增功能(拍照)

我們建立一個cameraTakePicture函式回撥到我們的事件監聽器。當按鈕被點選它會被觸發。在這個函式中呼叫由外掛API提供navigator.camera全域性物件。如果拍照是成功的，該資料將被傳送到 onSuccess 回撥函式，如果不成功，將顯示錯誤訊息提示。將會把這個程式碼在 index.js 的底部。

function cameraTakePicture() {
   navigator.camera.getPicture(onSuccess, onFail, { 
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL
   });

   function onSuccess(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }
}

當我們執行應用程式，並按下按鈕，本機攝像頭將被觸發。

當我們需要儲存的圖片，它會顯示在螢幕上。

相同的過程可用於從本地檔案系統獲取的影象。唯一不同的是在最後一個步驟中建立的函式。你可以看到，sourceType可選引數已被新增。

步驟1B

D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-camera

步驟2B

<button id = "cameraGetPicture">GET PICTURE</button>

步驟3B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

步驟4B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

當我們按下第二個按鈕，檔案系統就會開啟，但不是相機，我們可以選擇想要顯示的影象。