Cordova - 相機

此外掛用於拍攝照片或使用圖片庫中的檔案。

步驟 1 - 安裝相機外掛

在命令提示符視窗中執行以下程式碼以安裝此外掛。

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

步驟 2 - 新增按鈕和影像

現在，我們將建立一個用於呼叫相機的按鈕和一個img標籤，拍攝的照片將顯示在此處。這將新增到index.html檔案中的div class = "app"元素內。

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

步驟 3 - 新增事件監聽器

事件監聽器新增到onDeviceReady函式中，以確保在開始使用Cordova之前已載入Cordova。

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可選引數。

步驟 1 B

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

步驟 2 B

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

步驟 3 B

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

步驟 4 B

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

}

當我們按下第二個按鈕時，將開啟檔案系統而不是相機，以便我們可以選擇要顯示的影像。

此外掛提供許多可選引數用於自定義。