一、 Camera Api 简单介绍
Camera 选择使用摄像头拍照，或从设备相册中获取一张照片。图片以 base64 编码的 字符串或图片 URI 形式返回。
方法：
1. camera.getPicture 拍照获取相册图片 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraSuccess：提供图像数据的 onSuccess 回调函数。
cameraError：提供错误信息的 onError 回调函数。
cameraOptions：定制摄像头设置的可选参数
2. camera.cleanup 清除拍照后设备的缓存图片
navigator.camera.cleanup( cameraSuccess, cameraError );
3.cameraOptions 参数： 定制摄像头设置的可选参数。
quality : 存储图像的质量，范围是[0,100]。
destinationType :选择返回数据的格式。
DATA_URL :0, // Return image as base64-encoded string
FILE_URI :1, // Return image file URI
NATIVE_URI :2 // Return image native URI (e.g. assets-library:// on iOS or content:// on Android)
sourceType :设定图片来源。data:image/jpeg;base64,
PHOTOLIBRARY :0,//拍完照后图片的路劲从图库中获取
CAMERA :1,//拍完照后图片的路劲从设备照相机中获取
SAVEDPHOTOALBUM :2//拍完照后图片的路劲从相册中获取
allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有 ios 支持，在 Android 中，忽略 allowEdit 参数。)
encodingType :选择返回图像文件的编码方 encodingType: Camera.EncodingType.JPEG
targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度
targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度
saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册
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
cameraDirection 选择前置摄像头还是后置摄像头
BACK :0, // Use the back-facing camera
FRONT :1 // Use the front-facing camera
Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ document.addEventListener("deviceready", myDeviceReadyListener, false); }); function myDeviceReadyListener(){ $('#btn_getPic').click(function(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 70, destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url 这里进行了编码，成功拍照获取图片路径对应的方式如下 //sourceType:Camera.PictureSourceType.Camera, //摄像机获取，调用拍照 sourceType:Camera.PictureSourceType.PHOTOLIBRARY, //从图库中选取图片，不用调用拍照 targetWidth:200, targetHeight:200 }); }) } //成功 回调函数里包含图片的地址 function onSuccess(imageURI){ alert(imageURI); $('#img_pic').css('display','block'); $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI); //image.src = "data:image/jpeg;base64," + imageData; } //失败 回调函数李包含失败返回的信息 function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Camera</h1> </div> <div data-role="content"> <img style="dispaly:none" id="img_pic"/> <a id="btn_getPic" href="#" data-role="button">拍照</a> </div> <div data-role="footer"> <h4> </h4> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ document.addEventListener("deviceready", myDeviceReadyListener, false); }); function myDeviceReadyListener(){ $('#btn_getPic').click(function(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URI, //以文件地址返回url sourceType:Camera.PictureSourceType.Camera, targetWidth:300, targetHeight:300 }); }) } //成功 function onSuccess(imageURI) { alert(imageURI); $('#img_pic').css('display','block'); $('#img_pic').attr("src",imageURI);//这种获取图片路径的方式对应的是destinationType: Camera.DestinationType.FILE_URI } //失败 function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Camera</h1> </div> <div data-role="content"> <img style="dispaly:none" id="img_pic"/> <a id="btn_getPic" href="#" data-role="button">拍照</a> </div> <div data-role="footer"> <h4> </h4> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ document.addEventListener("deviceready", myDeviceReadyListener, false); }); function myDeviceReadyListener(){ $('#btn_getPic').click(function(){ navigator.camera.getPicture(onSuccess, onFail, { quality: 70, destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url sourceType:Camera.PictureSourceType.Camera, targetWidth:100, targetHeight:100 }); }) } //成功 function onSuccess(imageURI){ alert(imageURI); $('#img_pic').css('display','block'); $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI); //image.src = "data:image/jpeg;base64," + imageData; } //失败 function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Camera</h1> </div> <div data-role="content"> <img style="dispaly:none" id="img_pic"/> <a id="btn_getPic" href="#" data-role="button">拍照</a> </div> <div data-role="footer"> <h4> </h4> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>phonegap_device_network_notification01</title> <link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/> <script src="../jquery.js" type="text/javascript"></script> <script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script> <script src="../cordova.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ document.addEventListener("deviceready", myDeviceReadyListener, false); }); function myDeviceReadyListener(){ //从相机拍照获取 base64 编码方式返回 $('#btn_getPic').click(function(){ navigator.camera.getPicture(onSuccess1, onFail, { quality: 70, destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url sourceType:Camera.PictureSourceType.Camera, targetWidth:100, targetHeight:100 }); }) //从图库获取 url $('#btn_getLibiaryPic').click(function(){ navigator.camera.getPicture(onSuccess2, onFail, { quality: 70, destinationType: Camera.DestinationType.FILE_URL, //以文件地址返回url，如果选择的媒体类型是视频，只能是这个方式：FILE_URL sourceType:Camera.PictureSourceType.PHOTOLIBRARY, mediaType:Camera.MediaType.VIDEO, targetWidth:100, targetHeight:100 }); }) } //成功 相机 function onSuccess1(imageURI){ alert(imageURI); $('#img_pic').css('display','block'); $('#img_pic').attr("src","data:image/jpeg;base64," + imageURI); //image.src = "data:image/jpeg;base64," + imageData; } //成功 图库 function onSuccess2(imageURI){ alert(imageURI); //$('#img_pic').css('display','block'); // $('#img_pic').attr("src",imageURI); $("#videocontainer").append("<video height=240 width=300 controls='controls' src='"+imageURI+"' >your browder doesn't support video tag</video>"); //image.src = "data:image/jpeg;base64," + imageData; } //失败 function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Camera</h1> </div> <div data-role="content"> <img style="dispaly:none" id="img_pic"/> <a id="btn_getPic" href="#" data-role="button">拍照</a> <a id="btn_getLibiaryPic" href="#" data-role="button">本地预览</a> <div id="videocontainer"> </div> </div> <div data-role="footer"> <h4> </h4> </div> </div> </body> </html>