<!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相机
最新推荐文章于 2016-01-28 16:58:00 发布