第1步 - 安裝照相機(jī)插件

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

第2步 - 添加按鈕和圖象

在這一步中，我們將調(diào)用圖像顯示一次拍攝的攝像頭和圖像創(chuàng)建按鈕。這將被添加到的 index.html 的 div class = "app" 元素中。

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

第3步 - 添加事件監(jiān)聽器

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

第4步 - 添加功能(拍照)

我們創(chuàng)建一個cameraTakePicture函數(shù)回調(diào)到我們的事件監(jiān)聽器。當(dāng)按鈕被點擊它會被觸發(fā)。在這個函數(shù)中調(diào)用由插件API提供navigator.camera全局對象。如果拍照是成功的，該數(shù)據(jù)將被發(fā)送到 onSuccess 回調(diào)函數(shù)，如果不成功，將顯示錯誤消息提示。將會把這個代碼在 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);
   }
}

當(dāng)我們運行應(yīng)用程序，并按下按鈕，本機(jī)攝像頭將被觸發(fā)。

當(dāng)我們需要保存的圖片，它會顯示在屏幕上。

相同的過程可用于從本地文件系統(tǒng)獲取的圖像。唯一不同的是在最后一個步驟中創(chuàng)建的函數(shù)。你可以看到，sourceType可選參數(shù)已被添加。

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

}

當(dāng)我們按下第二個按鈕，文件系統(tǒng)就會打開，但不是相機(jī)，我們可以選擇想要顯示的圖像。