科尔多瓦 - 相机

---

该插件用于拍照或使用图片库中的文件。

第 1 步 - 安装相机插件

在命令提示符窗口中运行以下代码来安装此插件。

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

第 2 步 - 添加按钮和图像

现在，我们将创建用于调用相机和img 的按钮，拍摄后将在其中显示图像。这将被添加到div class = "app"元素内的index.html中。

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

第 3 步 - 添加事件监听器

事件侦听器添加到onDeviceReady函数内，以确保 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可选参数。

步骤1B

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

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

}

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

该插件提供了许多用于定制的可选参数。