现在的位置: 首页 > 综合 > 正文

PhoneGap API中文帮助文档——Camera (摄像头)

2013年05月10日 ⁄ 综合 ⁄ 共 5920字 ⁄ 字号 小 中 大 ⁄ 评论关闭
“ camera对象提供对设备默认摄像头应用程序的访问。

方法：

  • camera.getPicture


参数：

  • cameraSuccess
  • cameraError
  • cameraOptions



camera.getPicture
 




选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。

简单的范例：

  1. navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );  

复制代码


说明：

camera.getPicture函数打开设备的默认摄像头应用程序，使用户可以拍照（如果 Camera.sourceType 设置为 Camera.PictureSourceType.CAMERA，这也是默认值）。一旦拍照结束，摄像头应用程序会关闭并恢复用户应用程序。

如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。

返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：

  • 一个字符串，包含Base64编码的照片图像（默认情况）。
  • 一个字符串，表示在本地存储的图像文件位置。

你可以对编码的图片或URI做任何处理，例如：

  • 通过标签渲染图片（参看后续范例）
  • 存储为本地数据（LocalStorage，Lawnchair*等）
  • 将数据发送到远程服务器

备注：较新的设备上使用摄像头拍摄的照片的质量是相当不错的，使用Base64对这些照片进行编码已导致其中的一些设备出现内存问题（如IPHONE4、BlackBerry Torch 9800）。因此，强烈建议将“Camera.destinationType”设为FILE_URI。

支持的平台：

  • Android
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iOS


简单的范例：

拍照并获取Base64编码的图像：

  1.     navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });  
  2.       
  3.     function onSuccess(imageData) {  
  4.        var image = document.getElementById('myImage');  
  5.        image.src = "data:image/jpeg;base64," + imageData;  
  6.     }  
  7.       
  8.     function onFail(message) {  
  9.        alert('Failed because: ' + message);  
  10.     }  

复制代码

拍照并获取图像文件路径：

  1.     navigator.camera.getPicture(onSuccess, onFail, { quality: 50,  
  2.                     destinationType: Camera.DestinationType.FILE_URI });  
  3.                       
  4.     function onSuccess(imageURI) {  
  5.         var image = document.getElementById('myImage');  
  6.         image.src = imageURI;  
  7.     }  
  8.           
  9.     function onFail(message) {  
  10.         alert('Failed because: ' + message);  
  11.     }  

复制代码

完整的范例：

  1.     <!DOCTYPE html>  
  2.     <html>  
  3.     <head>  
  4.     <title>Capture Photo</title>  
  5.       
  6.     <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>  
  7.     <script type="text/javascript" charset="utf-8">  
  8.       
  9.         var pictureSource;      //图片来源  
  10.         var destinationType;        //设置返回值的格式  
  11.           
  12.         // 等待PhoneGap连接设备  
  13.         document.addEventListener("deviceready",onDeviceReady,false);  
  14.           
  15.         // PhoneGap准备就绪，可以使用！  
  16.         function onDeviceReady() {  
  17.             pictureSource=navigator.camera.PictureSourceType;  
  18.             destinationType=navigator.camera.DestinationType;  
  19.         }  
  20.           
  21.         // 当成功获得一张照片的Base64编码数据后被调用  
  22.         function onPhotoDataSuccess(imageData) {  
  23.           
  24.             // 取消注释以查看Base64编码的图像数据  
  25.             // console.log(imageData);  
  26.             // 获取图像句柄  
  27.             var smallImage = document.getElementById('smallImage');  
  28.                    
  29.             // 取消隐藏的图像元素  
  30.             smallImage.style.display = 'block';  
  31.               
  32.             // 显示拍摄的照片  
  33.             // 使用内嵌CSS规则来缩放图片  
  34.             smallImage.src = "data:image/jpeg;base64," + imageData;  
  35.         }  
  36.              
  37.        // 当成功得到一张照片的URI后被调用  
  38.        function onPhotoURISuccess(imageURI) {  
  39.           
  40.             // 取消注释以查看图片文件的URI  
  41.             // console.log(imageURI);  
  42.             // 获取图片句柄  
  43.             var largeImage = document.getElementById('largeImage');  
  44.                
  45.             // 取消隐藏的图像元素  
  46.             largeImage.style.display = 'block';  
  47.           
  48.             // 显示拍摄的照片  
  49.             // 使用内嵌CSS规则来缩放图片  
  50.             largeImage.src = imageURI;  
  51.         }  
  52.              
  53.        // “Capture Photo”按钮点击事件触发函数  
  54.        function capturePhoto() {  
  55.       
  56.             // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像  
  57.             navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });  
  58.        }  
  59.          
  60.        // “Capture Editable Photo”按钮点击事件触发函数  
  61.        function capturePhotoEdit() {  
  62.       
  63.             // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像  
  64.             navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });  
  65.        }  
  66.              
  67.        //“From Photo Library”/“From Photo Album”按钮点击事件触发函数  
  68.        function getPhoto(source) {  
  69.          
  70.             // 从设定的来源处获取图像文件URI  
  71.             navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,  
  72.             destinationType: destinationType.FILE_URI,sourceType: source });  
  73.        }  
  74.       
  75.        // 当有错误发生时触发此函数  
  76.        function onFail(mesage) {  
  77.             alert('Failed because: ' + message);  
  78.        }  
  79.           
  80.     </script>  
  81.       
  82.     </head>  
  83.     <body>  
  84.         <button onclick="capturePhoto();">Capture Photo</button> <br>  
  85.         <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>  
  86.         <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>  
  87.         <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>  
  88.         <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />  
  89.         <img style="display:none;" id="largeImage" src="" />  
  90.         </body>  
  91.     </html>  

复制代码

cameraSuccess
 

提供图像数据的onSuccess回调函数。

  1.     function(imageData) {  
  2.        // 对图像进行处理  
  3.     }  

复制代码

参数：

  • imageData：根据cameraOptions的设定值，为Base64编码的图像数据或图像文件的URI。（字符串类型）


范例：

  1.     // 显示图片  
  2.     function cameraCallback(imageData) {  
  3.         var image = document.getElementById('myImage');  
  4.         image.src = "data:image/jpeg;base64," + imageData;  
  5.     }  

复制代码

cameraError
 

提供错误信息的onError回调函数。

  1.     function(message) {  
  2.        // 显示有用信息  
  3.     }  

复制代码

参数：

  • message：设备本地代码提供的错误信息。（字符串类型）



cameraOptions
 




定制摄像头设置的可选参数。

  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};  

复制代码

选项：

  • quality：存储图像的质量，范围是[0,100]。（数字类型）
  • destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。（数字类型）
  1.     Camera.DestinationType = {  
  2.         DATA_URL : 0,   //返回Base64编码字符串的图像数据  
  3.         FILE_URI : 1    //返回图像文件的URI  
  4.     }  

复制代码

  • sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型）
  1.     Camera.PictureSourceType = {  
  2.         PHOTOLIBRARY : 0,  
  3.         CAMERA : 1,  
  4.         SAVEDPHOTOALBUM : 2  
  5.     }  

复制代码

  • allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型）
  • EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型）
  1.     Camera.EncodingType = {  
  2.         JPEG : 0,       // 返回JPEG格式图片  
  3.         PNG : 1         // 返回PNG格式图片  
  4.     };  

复制代码


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

Android的特异情况：

  • 忽略allowEdit参数。
  • Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。
  • Camera.EncodingType不被支持。


BlackBerry的特异情况：