<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=0;"
name="viewport"/>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../cordova-2.7.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<style>
.select{border:4px #ff0000 solid;}
</style>
<script type="text/javascript">
$(document).live("pageinit",function(e){
// 設置返回值的格式
$("#pz").live("tap",function(e){//拍照
alert("aaaa");
navigator.camera.getPicture(onPhotoURISuccess, onFail,
{ quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI ,
sourceType: navigator.camera.PictureSourceType.CAMERA}
);
});
$("#sc").live("tap",function(e){//上傳
if(photoList.length<=0){
alert("您尚未選擇任何圖片！");
return false;
}
alert("上傳圖片"+photoList);
var imageURI=photoList[0];
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = {};
params.value1 = "test";
params.value2 = "param";
options.params = params;
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"),
function(){
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}, function(error){
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}, options);
});
var photoList=new Array();
//拍照成功的回調
/*
//camera的選項：
1----Camera.sourceType:(A CameraPopoverHandle object(照片獲取控制參數))
//打開默認的的照相設備，獲取一張照片
Camera.sourceType = Camera.PictureSourceType.CAMERA
//彈出照片選擇框 ，從相冊中選取一張圖片。
Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY
Camera.sourceType = Camera.PictureSourceType.SAVEDPHOTOALBUM
Camera.PictureSourceType = {
//常量
PHOTOLIBRARY : 0,
CAMERA : 1,
SAVEDPHOTOALBUM : 2
};
2 ----Camera.DestinationType：(成功回調的返回值得格式設置)
Camera.DestinationType= Camera.DestinationType.DATA_URL;// 返回圖片的base64編碼字符串
Camera.DestinationType= Camera.DestinationType.FILE_URI;// 返回圖片文件的URI
Camera.DestinationType= Camera.DestinationType.NATIVE_URI;// Return image native URI (eg. assets-library:// on iOS or content:// on Android)
Camera.DestinationType = {
//常量
DATA_URL : 0,
FILE_URI : 1,
NATIVE_URI : 2
};
3 ---- Camera.Direction：選擇攝像頭（前置（font）/後置（））。
Camera.Direction = {
BACK : 0, // 後置
FRONT : 1 // 前置
};
4 ----Camera.MediaType：設置媒體選擇的類型。只能當PictureSourceType PHOTOLIBRARY或SAVEDPHOTOALBUM可以使用。
Camera.MediaType = {
PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
VIDEO: 1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI
ALLMEDIA : 2 // allow selection from all media types
}
//camera方法:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
1 cameraSuccess(params):獲取成功的回調函數。
//params依賴於cameraOptions的格式化
//params: 1 照片base64編碼生成的String，
2 圖像文件在本地存儲位置的String(默認)。
（你可以做任何你想要的圖片或URI編碼,例如:
<img>標籤內顯示圖片
保存數據到本地(LocalStorage, Lawnchair等)
提交數據到服務器
）
//cameraOptions:自定義相機的設置參數
{ quality : 75,//照片質量(0-100)
//照片選擇返回值的格式.由navigator.camera.DestinationType設定
destinationType : Camera.DestinationType.DATA_URL,
//照片獲取控制參數
sourceType : Camera.PictureSourceType.CAMERA,
//允許簡單的圖像編輯之前的選擇。（boolean）
allowEdit : true,
//返回的圖像文件的編碼。navigator.camera中由Camera.EncodingType定義
//Camera.EncodingType = {
// JPEG : 0, // Return JPEG encoded image
// PNG : 1 // Return PNG encoded image
// };
encodingType: Camera.EncodingType.JPEG,
//寬度。與targetHeight必須使用長寬比
targetWidth: 100,
targetHeight: 100,
//設置媒體選擇的類型。只能當PictureSourceType PHOTOLIBRARY或SAVEDPHOTOALBUM可以使用。
//Camera.MediaType = {
// PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
// VIDEO: 1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI
// ALLMEDIA : 2 // allow selection from all media types
// }
mediaType: Camera.MediaType.PICTURE,
//旋轉圖像捕獲設備的正確的方向
correctOrientation: false;
//選擇攝像頭（前置（font）/後置（））
//Camera.Direction = {
// BACK : 0, // 後置
// FRONT : 1 // 前置
// };
cameraDirection: navigator.camera.Font,
//popoverOptions: iOS only options to specify popover location in iPad. Defined in CameraPopoverOptions.
popoverOptions: CameraPopoverOptions,
//保存到相冊
saveToPhotoAlbum: false };
*/
function onPhotoURISuccess(imageData) {//獲取圖片抵制
alert("拍照成功："+imageData);
var currentTime=new Date();
var $li=$("<li><img src='"+imageData+"' title='未選' height='120px' width='120px'/>"
+"<h6>拍攝時間："+currentTime+"</h6></li>");
$("#photoList").append($li);
$.mobile.pageContainer.trigger("create");
}
$("#photoList").find("img").live("tap",function(){ //圖片選中
if($(this).hasClass("select")){
$(this).removeClass("select");
photoList.splice(photoList.indexOf($(this).attr("src")),1);
}else{
$(this).css({"border":"4px #ff0000 dashed","title":"已選"});
if(photoList.indexOf($(this).attr("src"))==-1){
photoList.push($(this).attr("src"));
}
}
alert("已選"+photoList.length+"張圖片！");
});
//拍照失敗的回調
function onFail(message) {
alert('拍照失敗: ' + message);
}
});
</script>
<style>
.a{border: 2px saddlebrown dashed;
}
</style>
</head>
<body>
<div data-role="page" id="upload">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-id="myHeader">
<h2>圖片上傳</h2>
<a id="pz" data-role="button" data-mini="true" data-inline="true">拍照</a>
<a id="sc" data-role="button" data-mini="true" data-inline="true">上傳</a>
</div>
<div data-role="content">
<ul data-role="listview" id="photoList">
</ul>
</div>
</div>
</body>
</html>
phoneGap相機
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
技術整理（陳年佳釀）
技術站點 Hacker News：非常棒的針對編程的鏈接聚合網站 Programming reddit：同上 MSDN：微軟相關的官方技術集中地，主要是文檔類 infoq：企業級應用，關注軟件開發領域