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

}

当我们按下第二个按钮时，将打开文件系统而不是相机，以便我们可以选择要显示的图像。

此插件提供许多可选参数用于自定义。