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);
   }

}

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