phonegap入门 -- Camera 摄像头

最新推荐文章于 2021-01-13 09:57:39 发布

SalmonellaVaccine

最新推荐文章于 2021-01-13 09:57:39 发布

阅读量731

点赞数

分类专栏： JavaScript PhoneGap Cordova

JavaScript 同时被 3 个专栏收录

193 篇文章 0 订阅

订阅专栏

PhoneGap

6 篇文章 0 订阅

订阅专栏

Cordova

4 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/mengxiangyue/article/details/8796254

今天周六了,每次到了周六就不知道干嘛去,好没劲啊.有在北京的如果周六也没劲的,可以联系我大家一起出去玩,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编码的照片图像（默认情况）。
一个字符串，表示在本地存储的图像文件位置。

下面看一个简单的例子

[html]view plaincopy 
   
 <!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 onclick="capturePhoto();">Capture Photo</button> <br>  
     <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>  
     <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>  
     <button onclick="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:

一般格式如下:

[html]view plaincopy 
   
 { 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进行定义。(数字类型)

[html]view plaincopy 
   
 Camera.DestinationType = {   
     DATA_URL : 0, //返回Base64编码字符串的图像数据   
     FILE_URI : 1 //返回图像文件的URI   
 }   

sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。(数字类型)

[html]view plaincopy 
   
 Camera.PictureSourceType = {   
     PHOTOLIBRARY : 0,   
     CAMERA : 1,   
     SAVEDPHOTOALBUM : 2   
 }   

allowEdit：在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)
EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。(数字类型)

[html]view plaincopy 
   
 Camera.EncodingType = {   
     JPEG : 0, // 返回JPEG格式图片   
     PNG : 1 // 返回PNG格式图片   
 };   

targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。(数字类型)
targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。(数字类型)

这些属性并不是在所有的设备上都起作用,具体的每个设备的支持情况还请参照官方文档.

下面介绍第二个方法

camera.cleanup

清空使用摄像头拍照时候产生的缓存文件.

当我们使用如下参数的时候会产生临时文件,这时候使用这个方法会及时的清楚临时文件.

Camera.sourceType = Camera.PictureSourceType.CAMERA and Camera.destinationType = Camera.DestinationType.FILE_URI

使用方法如下:

navigator.camera.cleanup( cameraSuccess, cameraError );

这个方法的回调方法中没有参数,只是去调用对应的方法,可以在对应的方法中alert一些东西,判断是否清空了.

SalmonellaVaccine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录