cordova - Cordova照相机 - cordova教程 , 学习cordova , cordova android , cordova ios



这个插件用于拍照或使用图库文件。

第1步 - 安装照相机插件

  • 在提示符窗口运行下面命令代码来安装这个插件。
cordova教程 - cordova - 
Cordova照相机 - 
cordova plugin -Cordova文件系统 - Cordova plugin 生成 -  
- Cordova文件传输 - apache cordova的例子
D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-camera
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第2步 - 添加按钮和图象

  • 在这一步中,我们将调用图像显示一次拍摄的摄像头和图像创建按钮。这将被添加到的 index.html 的 div class = "app" 元素中。
D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-camera
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第3步 - 添加事件监听器

  • 事件侦听器添加到 onDeviceReady 函数中,以确保我们开始使用它之前被Cordova加载。
document.getElementById("cameraTakePicture").addEventListener
   ("click", cameraTakePicture);	
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第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);
   }
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

当我们运行应用程序,并按下按钮,本机摄像头将被触发。

 Cardova Camera

Learn Cordova - Cordova tutorial - Cardova Camera - Cordova examples - Cordova programs

当我们需要保存的图片,它会显示在屏幕上。

 Apache Cardova

Learn Cordova - Cordova tutorial - Apache Cardova - Cordova examples - Cordova programs

相同的过程可用于从本地文件系统获取的图像。唯一不同的是在最后一个步骤中创建的函数。你可以看到,sourceType可选参数已被添加。

步骤1B

D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-camera
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

步骤2B

<button id = "cameraGetPicture">GET PICTURE</button>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

步骤3B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

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

}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

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

 Cardova Display Image

Learn Cordova - Cordova tutorial - Cardova Display Image - Cordova examples - Cordova programs

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

SN 参数 & 详细
1 quality

在0-100的范围内的图像质量。默认值是50。

2 destinationType

DATA_URL 或 0 返回base64编码字符串

FILE_URI 或 1 返回图像文件URI

NATIVE_URI 或 2 返回图像本地URI

3 sourceType

PHOTOLIBRARY 或 0 打开照片库

CAMERA 或 1 打开机摄像头

SAVEDPHOTOALBUM 或 2 打开保存相册

4 allowEdit

允许图像编辑

5 encodingType

JPEG 或 0 返回JPEG编码的图像

PNG 或 1 返回PNG编码的图像

6 targetWidth

图像中的像素缩放宽度

7 targetHeight

图像中的像素比例的高度

8 mediaType

PICTURE 或 0 只允许选择照片

VIDEO 或 1 只允许选择视频

ALLMEDIA 或 2 允许选择所有媒体类型

9 correctOrientation

用于校正图象的方向

10 saveToPhotoAlbum

用于将图像保存到相册

11 popoverOptions

用于在IOS设置酥弹出的位置

12 cameraDirection

FRONT 或 0 前置摄像头

BACK 或 1 后置摄像头

ALLMEDIA


Related Searches to Cordova照相机