Cordova 相机

此插件用于拍摄照片或使用图像库中的文件。

步骤1 - 安装相机插件

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

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

步骤2 - 添加按钮和图像

在此步骤中，我们将创建用于调用摄像头的按钮和在拍摄后将显示图像的 img 。将其添加到 div.html = 元素中的 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 可选参数。

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

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

这个插件提供了许多可选的参数定制。

转载本站内容时，请务必注明来自W3xue，违者必究。