今天研究了下如何使用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"/>