Cordova 相機

此插件用于拍攝照片或使用圖像庫中的文件。

步驟1 - 安裝相機插件

在命令提示符窗口中運行以下代碼以安裝此插件。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

步驟2 - 添加按鈕和圖像

在此步驟中，我們將創(chuàng)建用于調(diào)用攝像頭的按鈕和在拍攝后將顯示圖像的 img 。將其添加到 div.html = 元素中的 index.html 。

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

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

事件偵聽器添加到 onDeviceReady 函數(shù)中，以確保Cordova在我們開始使用它之前加載。

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

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

我們正在創(chuàng)建 cameraTakePicture 函數(shù)，該函數(shù)作為回調(diào)傳遞給我們的事件偵聽器。 當點擊按鈕時，它會被觸發(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);
   }
}

當我們運行應(yīng)用程序，并按按鈕，本機相機將被觸發(fā)。

當我們拍攝和保存圖片時，它將顯示在屏幕上。

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

步驟1

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

步驟2

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

步驟3

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

步驟4

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

}

當我們按第二個按鈕時，文件系統(tǒng)將打開而不是相機，所以我們可以選擇我們想要顯示的圖像。

這個插件提供了許多可選的參數(shù)定制。