Cordova照相机

第1步 - 安装照相机插件

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

第2步 - 添加按钮和图象

在这一步中，我们将调用图像显示一次拍摄的摄像头和图像创建按钮。这将被添加到的 index.html 的 div class = "app" 元素中。

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

第3步 - 添加事件监听器

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

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

}

当我们按下第二个按钮，文件系统就会打开，但不是相机，我们可以选择想要显示的图像。