今天研究了下如何使用phonegap调用手机摄像头;写了一个小小的demo,给出部分代码仅供参考
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.min.js"></script>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8">
function loadImage() {
//拍照并显示在屏幕
navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {destinationType: Camera.DestinationType.DATA_URL});
}
//拍照成功后回调
function onLoadImageSuccess(imageURI) {
//这里的图片经过了base64编码
var src = "data:image/jpeg;base64," + imageURI;
$("#getImage").attr("src", src);
$("#getImage").show();
}
//所有获取图片失败都回调此函数
function onLoadImageFail(message) {
navigator.notification.alert("拍照失败,原因:" + message, null, "警告");
}
function loadImageLocal() {
//获取本地图片并显示在屏幕
navigator.camera.getPicture(onLoadImageLocalSuccess, onLoadImageFail, {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
}
//本地图片选择成功后回调此函数
function onLoadImageLocalSuccess(imageURI) {
$("#getImageLocal").attr("src", imageURI);
$("#getImageLocal").show();
}
function loadImageUpload() {
//拍照上传并显示在屏幕
navigator.camera.getPicture(onLoadImageUploadSuccess, onLoadImageFail, {
destinationType: Camera.DestinationType.FILE_URI
});
}
//图片拍照成功后回调此函数
function onLoadImageUploadSuccess(imageURI) {
//此处执行文件上传的操作,上传成功后执行下面代码
var options = new FileUploadOptions(); //文件参数选项
options.fileKey = "file";//向服务端传递的file参数的parameter name
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);//文件名
options.mimeType = "image/jpeg";//文件格式,默认为image/jpeg
var ft = new FileTransfer();//文件上传类
ft.onprogress = function (progressEvt) {//显示上传进度条
if (progressEvt.lengthComputable) {
navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100));
}
}
navigator.notification.progressStart("提醒", "当前上传进度");
ft.upload(imageURI, encodeURI('http://192.168.191.1:8010/AndroidService/PersonServlet'), function () {
navigator.notification.progressStop();//停止进度条
$("#getImageUpload").attr("src", imageURI);
$("#getImageUpload").show();
navigator.notification.alert("文件上传成功!", null, "提醒");
}, null, options);
}
</script>
</head>
<body>
<h1>Hello PhoneGap</h1>
<p>
<input type="button" value="拍照" onclick="loadImage();"/>
<img src="" id="getImage" style="display: none;width: 120px;height: 120px;"/>
</p>
<p>
<input type="button" value="本地图片" onclick="loadImageLocal();"/>
<img src="" id="getImageLocal" style="display: none;width: 120px;height: 120px;"/>
</p>
<p>
<input type="button" value="拍照上传" onclick="loadImageUpload();"/>
<img src="" id="getImageUpload" style="display: none;width: 120px;height: 120px;"/>
</p>
</body>
</html>
AndroidManifest.xml中权限的配置:
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECEIVE_SMS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/>