cordova相机插件
插件安装
C:\Users\xpf\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera插件使用
-
获取手机拍照功能
通过代码看实际效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相机</title>
</head>
<style>
#MyImg{
height: 150px;
width:150px;
}
</style>
<body>
<button id="Btn">拍照</button>
<!-- 拍照后图片显示的地方 -->
<img id="MyImg">
</body>
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready',onDeviceReady,false);
function onDeviceReady(){
// 获取拍照按钮
var MyBtn = document.getElementById('Btn');
// 给拍照按钮添加监听事件
MyBtn.addEventListener('click',function(){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('MyImg');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
});
}
</script>效果图：
-
获取本地相册
通过代码实现功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地相册</title>
</head>
<style>
#MyImg{
height: 150px;
width:150px;
}
</style>
<body>
<button id="Btn">获取相册</button>
<!-- 拍照后图片显示的地方 -->
<img id="MyImg">
</body>
</html>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready',onDeviceReady,false);
function onDeviceReady(){
// 获取拍照按钮
var MyBtn = document.getElementById('Btn');
// 给拍照按钮添加监听事件
MyBtn.addEventListener('click',function(){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
function onSuccess(imageURL) {
var image = document.getElementById('MyImg');
image.src = imageURL;
}
function onFail(message) {
alert('Failed because: ' + message);
}
});
}
</script>效果图：
注意：这边如果直接复制粘贴w3c上的代码，可能会无法显示图片，所以我改了一个参数
W3C代码：
我的代码：
DATA_URL指的是 返回base64编码字符串；
FILE_URL指的是 返回图片文件URI
这里附上完整的参数及其含义，有兴趣的可以自己全都尝试一下：
| 参数 | 含义 |
| quality | 图像质量在0~100内，默认值为50 |
| destinationType |
DATA_URL 返回base64编码字符串 FILE_URL 返回图片文件URL NATIVE_URL 返回图片本机URL |
| sourceType |
PHOTOLIBRARY 打开照片库 CAMERA 打开本机相机 SAVEDPHOTOALBUM 打开已保存的相册 |
| allowEdit | 允许图像编辑 |
| encodingType |
JPEG 返回JPEG格式的图像 PNG 返回PNG格式的图像 |
| targetWidth | 图片缩放宽度 |
| targetHeight |
图片缩放高度 |
| cameraDirection |
FRONT 前置摄像头 返回 后置摄像头 |
-----------------本文完-----------------