打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
PhoneGap API帮助文档翻译Camera摄像头

PhoneGap API帮助文档翻译Camera摄像头是本文要介绍的内容,主要是来了解并学习PhoneGap API文档的内容,具体关于PhoneGap API文档内容的详解来看本文,camera对象提供对设备默认摄像头应用程序的访问。

方法:

camera.getPicture

参数:

  1. cameraSuccess  
  2. cameraError  
  3. cameraOptions 

camera.getPicture 

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

简单的范例:

  1. navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );    
  2. 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。

PhoneGap API支持的平台:

Android

BlackBerry WebWorks (OS 5.0或更高版本)

iOS

简单的范例:

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

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

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

  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. }    
  12. navigator.camera.getPicture(onSuccess, onFail, { quality: 50,  
  13.     destinationType: Camera.DestinationType.FILE_URI });  
  14.       
  15. function onSuccess(imageURI) {  
  16.  var image = document.getElementById('myImage');  
  17.  image.src = imageURI;  
  18. }  
  19.    
  20. function onFail(message) {  
  21.  alert('Failed because: ' + message);  

完整的范例:

  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>    
  92. <!DOCTYPE html> 
  93. <html> 
  94. <head> 
  95. <title>Capture Photo</title> 
  96.  
  97. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  98. <script type="text/javascript" charset="utf-8"> 
  99.  
  100.  var pictureSource;  //图片来源  
  101.  var destinationType;  //设置返回值的格式  
  102.    
  103.  // 等待PhoneGap连接设备  
  104.  document.addEventListener("deviceready",onDeviceReady,false);  
  105.    
  106.  // PhoneGap准备就绪,可以使用!  
  107.  function onDeviceReady() {  
  108.   pictureSource=navigator.camera.PictureSourceType;  
  109.   destinationType=navigator.camera.DestinationType;  
  110.  }  
  111.    
  112.  // 当成功获得一张照片的Base64编码数据后被调用  
  113.  function onPhotoDataSuccess(imageData) {  
  114.    
  115.   // 取消注释以查看Base64编码的图像数据  
  116.   // console.log(imageData);  
  117.   // 获取图像句柄  
  118.   var smallImage = document.getElementById('smallImage');  
  119.       
  120.   // 取消隐藏的图像元素  
  121.   smallImage.style.display = 'block';  
  122.     
  123.   // 显示拍摄的照片  
  124.   // 使用内嵌CSS规则来缩放图片  
  125.   smallImage.src = "data:image/jpeg;base64," + imageData;  
  126.  }  
  127.       
  128.    // 当成功得到一张照片的URI后被调用  
  129.    function onPhotoURISuccess(imageURI) {  
  130.    
  131.   // 取消注释以查看图片文件的URI  
  132.   // console.log(imageURI);  
  133.   // 获取图片句柄  
  134.   var largeImage = document.getElementById('largeImage');  
  135.      
  136.   // 取消隐藏的图像元素  
  137.   largeImage.style.display = 'block';  
  138.    
  139.   // 显示拍摄的照片  
  140.   // 使用内嵌CSS规则来缩放图片  
  141.   largeImage.src = imageURI;  
  142.  }  
  143.       
  144.    // “Capture Photo”按钮点击事件触发函数  
  145.    function capturePhoto() {  
  146.  
  147.   // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的图像  
  148.   navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });  
  149.    }  
  150.      
  151.    // “Capture Editable Photo”按钮点击事件触发函数  
  152.    function capturePhotoEdit() {  
  153.  
  154.   // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的可编辑图像  
  155.   navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });  
  156.    }  
  157.       
  158.    //“From Photo Library”/“From Photo Album”按钮点击事件触发函数  
  159.    function getPhoto(source) {  
  160.      
  161.      // 从设定的来源处获取图像文件URI  
  162.   navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,  
  163.   destinationType: destinationType.FILE_URI,sourceType: source });  
  164.    }  
  165.  
  166.    // 当有错误发生时触发此函数  
  167.    function onFail(mesage) {  
  168.   alert('Failed because: ' + message);  
  169.    }  
  170.    
  171. </script> 
  172.  
  173. </head> 
  174. <body> 
  175.  <button onclick="capturePhoto();">Capture Photo</button> <br> 
  176.  <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> 
  177.  <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> 
  178.  <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> 
  179.  <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 
  180.  <img style="display:none;" id="largeImage" src="" /> 
  181.  </body> 
  182. </html> 

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

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

PhoneGap API参数:

imageData:根据cameraOptions的设定值,为Base64编码的图像数据或图像文件的URI。(字符串类型)

PhoneGap API范例:

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

cameraError

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

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

PhoneGap API参数:

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};    
  8. { quality : 75,  
  9.  destinationType : Camera.DestinationType.DATA_URL,  
  10.  sourceType : Camera.PictureSourceType.CAMERA,  
  11.  allowEdit : true,  
  12.  encodingType : Camera.EncodingType.JPEG,  
  13.  targetWidth : 100,  
  14.  targetHeight : 100  
  15. }; 

PhoneGap API选项:

quality:存储图像的质量,范围是[0,100]。(数字类型)

destinationType:选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型)

  1. Camera.DestinationType = {   
  2.  
  3.     DATA_URL : 0,   //返回Base64编码字符串的图像数据    
  4.     FILE_URI : 1    //返回图像文件的URI    
  5. }    
  6. Camera.DestinationType = {  
  7.  DATA_URL : 0, //返回Base64编码字符串的图像数据  
  8.  FILE_URI : 1 //返回图像文件的URI  

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

  1. Camera.PictureSourceType = {    
  2.     PHOTOLIBRARY : 0,    
  3.     CAMERA : 1,    
  4.     SAVEDPHOTOALBUM : 2    
  5. }    
  6. Camera.PictureSourceType = {  
  7.  PHOTOLIBRARY : 0,  
  8.  CAMERA : 1,  
  9.  SAVEDPHOTOALBUM : 2  

allowEdit:在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)

EncodingType:选择返回图像文件的编码方式,通过navigator.camera.EncodingType进行定义。(数字类型)

  1. Camera.EncodingType = {    
  2.     JPEG : 0,       // 返回JPEG格式图片    
  3.     PNG : 1         // 返回PNG格式图片    
  4. };    
  5. Camera.EncodingType = {  
  6.  JPEG : 0,  // 返回JPEG格式图片  
  7.  PNG : 1   // 返回PNG格式图片  
  8. }; 

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

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

Android的特异情况:

忽略allowEdit参数。

Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。

Camera.EncodingType不被支持。

BlackBerry的特异情况:

忽略quality参数。

忽略sourceType参数。

忽略allowEdit参数。

当拍照结束后,应用程序必须有按键注入权限才能关闭本地Camera应用程序。

使用大图像尺寸,可能会导致新近带有高分辨率摄像头的型号设备无法对图像进行编码(如:Torch 9800)。

Palm的特异情况:

忽略quality参数。

忽略sourceType参数。

忽略allowEdit参数。

iPhone的特异情况:

为了避免部分设备上出现内存错误,quality的设定值要低于50。

当使用destinationType.FILE_URI时,使用摄像头拍摄的和编辑过的照片会存储到应用程序的Documents/tmp目录。

应用程序结束的时候,应用程序的Documents/tmp目录会被删除。如果存储空间大小非常关键的时候,开发者也可以通过navigator.fileMgr的接口来删除该目录。

小结:PhoneGap API帮助文档翻译Camera摄像头的内容介绍完了,希望通过PhoneGap API文档内容的学习能对你有所帮助!如果想要继续深入了解并学习PhoneGap API文档的内容,请参考编辑推荐。

【编辑推荐】

【责任编辑:李程站 TEL:(010)68476606】

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
PhoneGap+JQM实现用手机拍照并且上传图片的例子
ionic2拍照和文件上传
IP Camera 网络摄像头设计方案
PhoneGap+jQm webapp本地化--摄像头调用和本地数据库
PhoneGap版支付宝Android客户端开发小结
Photoshop Camera Raw 插件 处理图像
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服