您的位置: 首页  >  文章  >  转载了一个调用摄像头拍照的cordova案例

转载了一个调用摄像头拍照的cordova案例

分类: 文章 • 2024-10-07 21:19:52

文章类容如下：http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E7%9A%84/16384.shtml

"PhoneGap API帮助文档翻译—Camera 摄像头"：

关键词：phonegap api 帮助 文档 翻译 camera 摄像头

摘要: “camera对象提供对设备默认摄像头应用程序的访问。方法：camera.getpicture 参数：camerasuccesscameraerrorcameraoptions camera.getpicture 选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64 ...
 
 
“ 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*等）
  • 将数据发送到远程服务器
备注：较新的设备上

此文来自: 马开东博客 转载请注明出处 网址： http://www.makaidong.com

使用摄像头拍摄的照片的质量是相当不错的，使用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：设备本

    此文来自: 马开东博客 转载请注明出处 网址： http://www.makaidong.com

    地代码提供的错误信息。（字符串类型）
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的特异情况：
  • 忽略quality参数。
  • 忽略sourcetype参数。
  • 忽略allowedit参数。
  • 当拍照结束后，应用程序必须有按键注入权限才能关闭本地camera应用程序。
  • 使用大图像尺寸，可能会导致新近带有高分辨率摄像头的型号设备无法对图像进行编码（如：torch 9800）。

palm的特异情况：
  • 忽略quality参数。
  • 忽略sourcetype参数。
  • 忽略allowedit参数。

iphone的特异情况：
  • 为了避免部分设备上出现内存错误，quality的设定值要低于50。
  • 当使用destinationtype.file_uri时，使用摄像头拍摄的和编辑过的照片会存储到应用程序的documents/tmp目录。
  • <span javascript"="" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; background: transparent; max-width: 650px; height: auto;">var url = window.location.href;document.write("此文链接："+url+"
    ");document.write("转载请注明出处："+document.title+"");
转载了一个调用摄像头拍照的cordova案例

相关推荐