`
zy77612
  • 浏览: 278241 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

phonegap-详解navigator.camera.getPicture

阅读更多

Camera类

 
Camera类是PhoneGap照相机插件公开的一个类
使用该类可以从照相机或相册获取图片
可以使用如下方式安装照相机插件
phonegap plugin add org.apache.cordova.camera
 
使用navigator.camera可以返回一个Camera类的实例
用于获取图片的getPicture()便是Camera的一个方法
 
 

通过getPicture获取图片

 
获取图片的语法格式如下
navigator.camera.getPicture(onSuccess,onError,[cameraOptions]);
 
参数onSuccess是 执行成功后的回调函数
参数onError是执行失败后的回调函数
参数cameraOption可选，是一个对象，下面会详细讲述
 
 

cameraOption常用属性

 
{
quality:75,
destinationType:Camera.DestinationType.DATA_URL,
allowEdit:true,
encodingType:Camera.EncodingType.JPEG,
targetWidth:100,
targetHeight:100,
saveToPhotoAlbum:false
}
 
 
  • quality
          定义保存图片的质量，取值范围为[0,100]，100表示质量最高
  • destinationType
          选择返回数据的格式，取值为三个常量之一
               Camera.DestinationType.DATA_URL//表示返回图片作为base64编码
               Camera.DestinationType.FILE_URI//表示返回图片作为文件URI
               Camera.DestinationType.NATIVE_URI//表示返回图片作为文件URI
  • allowEdit:true
          设置在选择图片进行操作之前是否对其进行简单的编辑（Android系统会忽略此属性）
  • encodingType
          用于设置返回文件的类型，有一下几个常量可用
               Camera.EncodingType={
                    JPEG:0,                         //表示返回JPEG编码的图片
                    PNG:1                          //表示返回PNG编码的图片
               }
  • targetWidth
          用于定义缩放图片的宽度，以像素为单位。必须和targetHeight配合使用
  • targetHeight
          用于定义缩放图片的高度，以像素为单位。必须和targetWidth 配合使用
  • saveToPhotoAlbum
          用于决定是否在捕捉图片之后放入相册
 
 
 

图片显示

 
可以在成功获取图片回调函数中这样写
 
function onSuccess(imageURI){
     var image=document.getElementById('myImage');//你必须确保你的HTML中存在ID为myImage的DOM节点
     image.src=imageURI;
} 
 

实例

 
如下便是一个简单的从相册获取图片的函数
 
function picture_getPicture(cameraOption){//获取图片
    var quality=cameraOption.quality|50;//图像质量
    var destinationType=cameraOption.destinationType|Camera.DestinationType.FILE_URI;//编码类型
    var sourceType=cameraOption.sourceType|Camera.DestinationType.SAVEDPHOTOALBUM;//获取路径

    navigator.camera.getPicture(getpicture_success, getpicture_Error,
    {quality:quality, //图像质量
        destinationType:destinationType,//编码类型
        sourceType:sourceType//获取路径
    });
}
//--------------------------成功获取图片的回调函数---------------------------------------------
    function getpicture_success(imageURI) {
     //----------------------------显示图片，在不同的JS环境下，显示的方式不同----------------
          var app=getDefaultApp().diagramView;//找到main图纸
          var vi= Utility.getVIByVIID(app,"d_photo");//找到VI
          vi.setValue('image',imageURI);
     //-------------------------------------------------------------------------
          alert('图片设置成功'); 
    }
//--------------------------获取图片失败的回调函数 ---------------------------------------------
    function getpicture_Error(message) {
         alert('获取图片失败');
    }
//-------------------------------------------------------------------------

 

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

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 plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Capture Photo</title>  
  5.   
  6.     <script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>  
  7.     <script type="text/javascript" charset="utf-8">  
  8.   
  9.     var pictureSource;  //设定图片来源  
  10.     var destinationType; //选择返回数据的格式  
  11.   
  12.     document.addEventListener("deviceready",onDeviceReady,false);  
  13.   
  14.     // Cordova准备好了可以使用了  
  15.     function onDeviceReady() {  
  16.         pictureSource=navigator.camera.PictureSourceType;  
  17.         destinationType=navigator.camera.DestinationType;  
  18.     }  
  19.   
  20.     function onPhotoDataSuccess(imageData) {  
  21.       // base64 encoded image data  
  22.       var smallImage = document.getElementById('smallImage');  
  23.   
  24.       smallImage.style.display = 'block';  
  25.       //在使用base64编码的时候需要使用这样的前缀  
  26.       smallImage.src = "data:image/jpeg;base64," + imageData;  
  27.     }  
  28.   
  29.     // Called when a photo is successfully retrieved  
  30.     //  
  31.     function onPhotoURISuccess(imageURI) {  
  32.       // image file URI   
  33.       var largeImage = document.getElementById('largeImage');  
  34.       largeImage.style.display = 'block';  
  35.       //使用image file URI 直接赋值就可以了  
  36.       largeImage.src = imageURI;  
  37.     }  
  38.   
  39.     // 第一个按钮调用函数  
  40.     function capturePhoto() {  
  41.       navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,  
  42.         destinationType: destinationType.DATA_URL });  
  43.     }  
  44.   
  45.     //第二个按钮调用的函数  
  46.     function capturePhotoEdit() {  
  47.       navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,  
  48.         destinationType: destinationType.DATA_URL });  
  49.     }  
  50.   
  51.     //第三/四个按钮调用的函数  
  52.     function getPhoto(source) {  
  53.       // Retrieve image file location from specified source  
  54.       navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,   
  55.         destinationType: destinationType.FILE_URI,  
  56.         sourceType: source });  
  57.     }  
  58.   
  59.     function onFail(message) {  
  60.       alert('Failed because: ' + message);  
  61.     }  
  62.   
  63.     </script>  
  64.   </head>  
  65.   <body>  
  66.     <button onclick="capturePhoto();">Capture Photo</button> <br>  
  67.     <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>  
  68.     <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>  
  69.     <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>  
  70.     <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />  
  71.     <img style="display:none;" id="largeImage" src="" />  
  72.   </body>  
  73. </html>  


运行效果如下:

 

小图片是第一二个按钮拍照后显示的地方,大图片是三四按钮从相簿中选择后显示的.

下面介绍cameraOptions:

一般格式如下:

 

[html] view plain copy
 
  1. { quality : 75,  
  2.   destinationType : Camera.DestinationType.DATA_URL,  
  3.   sourceType : Camera.PictureSourceType.CAMERA,  
  4.   allowEdit : true,  
  5.   encodingType: Camera.EncodingType.JPEG,  
  6.   targetWidth: 100,  
  7.   targetHeight: 100,  
  8.   popoverOptions: CameraPopoverOptions,  
  9.   saveToPhotoAlbum: false };  


quality：存储图像的质量，范围是[0,100]。(数字类型)
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型)

 

 

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

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

[html] view plain copy
 
  1. Camera.PictureSourceType = {   
  2.     PHOTOLIBRARY : 0,   
  3.     CAMERA : 1,   
  4.     SAVEDPHOTOALBUM : 2   
  5. }   

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

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

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

 

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

 

下面介绍第二个方法

camera.cleanup

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

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

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

使用方法如下:

navigator.camera.cleanup( cameraSuccess, cameraError );

 

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

分享到：
圈子相处之道
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics