phonegap入门--4 Camera 摄像头
Posted 孟祥月
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了phonegap入门--4 Camera 摄像头相关的知识，希望对你有一定的参考价值。
今天周六了,每次到了周六就不知道干嘛去,好没劲啊.有在北京的如果周六也没劲的,可以联系我大家一起出去玩,qq598660766.
没事干,那就写写博客吧,今天介绍一下Camera这个对象.camera对象提供对设备默认摄像头应用程序的访问.
Camera提供了两个方法:
camera.getPicture
camera.cleanup
在使用Camera对象之前需要配置一下:
app/res/xml/config.xml
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
app/androidManifest
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
首先介绍第一个方法:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。
对于cameraOptions 在后面会介绍,这个主要是使用这个方法时候的配置参数.
camera.getPicture函数打开设备的默认摄像头应用程序，使用户可以拍照（如果 Camera.sourceType 设置为 Camera.PictureSourceType.CAMERA，这也是默认值）。一旦拍照结束，摄像头应用程序会关闭并恢复用户应用程序。
如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。
返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：
一个字符串，包含Base64编码的照片图像（默认情况）。
一个字符串，表示在本地存储的图像文件位置。
下面看一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; //设定图片来源
var destinationType; //选择返回数据的格式
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova准备好了可以使用了
function onDeviceReady()
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
function onPhotoDataSuccess(imageData)
// base64 encoded image data
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
//在使用base64编码的时候需要使用这样的前缀
smallImage.src = "data:image/jpeg;base64," + imageData;
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI)
// image file URI
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
//使用image file URI 直接赋值就可以了
largeImage.src = imageURI;
// 第一个按钮调用函数
function capturePhoto()
navigator.camera.getPicture(onPhotoDataSuccess, onFail, quality: 50,
destinationType: destinationType.DATA_URL );
//第二个按钮调用的函数
function capturePhotoEdit()
navigator.camera.getPicture(onPhotoDataSuccess, onFail, quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL );
//第三/四个按钮调用的函数
function getPhoto(source)
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source );
function onFail(message)
alert('Failed because: ' + message);
</script>
</head>
<body>
<button οnclick="capturePhoto();">Capture Photo</button> <br>
<button οnclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button οnclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button οnclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>运行效果如下:
小图片是第一二个按钮拍照后显示的地方,大图片是三四按钮从相簿中选择后显示的.
下面介绍cameraOptions:
一般格式如下:
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false ;quality：存储图像的质量，范围是[0,100]。(数字类型)
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型)
Camera.DestinationType =
DATA_URL : 0, //返回Base64编码字符串的图像数据
FILE_URI : 1 //返回图像文件的URI
Camera.PictureSourceType =
PHOTOLIBRARY : 0,
CAMERA : 1,
SAVEDPHOTOALBUM : 2
EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。(数字类型)
Camera.EncodingType =
JPEG : 0, // 返回JPEG格式图片
PNG : 1 // 返回PNG格式图片
; targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。(数字类型)
这些属性并不是在所有的设备上都起作用,具体的每个设备的支持情况还请参照官方文档.
下面介绍第二个方法
camera.cleanup
清空使用摄像头拍照时候产生的缓存文件.
当我们使用如下参数的时候会产生临时文件,这时候使用这个方法会及时的清楚临时文件.
Camera.sourceType = Camera.PictureSourceType.CAMERA and Camera.destinationType = Camera.DestinationType.FILE_URI
使用方法如下:
navigator.camera.cleanup( cameraSuccess, cameraError );
这个方法的回调方法中没有参数,只是去调用对应的方法,可以在对应的方法中alert一些东西,判断是否清空了.
以上是关于phonegap入门--4 Camera 摄像头的主要内容，如果未能解决你的问题，请参考以下文章
Angularjs + Phonegap Camera Plugin+ Facebook 打开图
Phonegap 3.4.0 和相机插件 (iOS) 的问题：CDVPlugin 类 CDVCamera (pluginName: camera) 不存在