cordova - Cordova照相机 - cordova教程 , 学习cordova , cordova android , cordova ios
这个插件用于拍照或使用图库文件。
第1步 - 安装照相机插件
- 在提示符窗口运行下面命令代码来安装这个插件。

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
当我们运行应用程序,并按下按钮,本机摄像头将被触发。

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

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 |