cordova入门级简单功能的实现(六)-用相机插件调用手机的相机功能
1:安装cordova相机插件:
在命令提示符窗口中运行以下代码以安装此插件。
cordova plugin add cordova-plugin-camera
2:添加按钮和图像
用编译软件将cordova项目打开,在WWW目录下的index下添加相应的按钮和图像如图所示
<button id="cameraTakePicture">TAKE PICTURE</button>
<img id="myImage">
3:添加事件监听和拍照功能
在js文件夹下进入 index.js,将事件侦听器添加到 onDeviceReady 函数中,以确保Cordova在我们开始使用它之前加载。
onDeviceReady: function() {
app.receivedEvent('deviceready');
document.getElementById("cameraTakePicture").onclick = function () {
navigator.camera.getPicture(function (data) {
document.getElementById("myImage").src = data;
},function (message) {
alert(message);
},{
destinationType:Camera.DestinationType.FILE_URI,
cameraDirection:Camera.Direction.BACK
})
}
},
具体的属性设置可以参考w3c和官网
打开命令行和模拟器,执行命令
cordova run android
点击TAKE PICTURE按钮,可以得到如下的界面
点击ALLOW允许调用摄像头进入拍照功能
此时就实现了调用相机的功能。