cordova - Cordova照相机 - cordova教程 , 学习cordova , cordova android , cordova ios
这个插件用于拍照或使用图库文件。
第1步 - 安装照相机插件
- 在提示符窗口运行下面命令代码来安装这个插件。
D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-cameraClicking "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-cameraClicking "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
当我们运行应用程序，并按下按钮，本机摄像头将被触发。
Learn Cordova - Cordova tutorial - Cardova Camera - Cordova examples - Cordova programs
当我们需要保存的图片，它会显示在屏幕上。
Learn Cordova - Cordova tutorial - Apache Cardova - Cordova examples - Cordova programs
相同的过程可用于从本地文件系统获取的图像。唯一不同的是在最后一个步骤中创建的函数。你可以看到，sourceType可选参数已被添加。
步骤1B
D:\worksp\cordova\CordovaProject>cordova plugin add cordova-plugin-cameraClicking "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
当我们按下第二个按钮，文件系统就会打开，但不是相机，我们可以选择想要显示的图像。
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 |