1. 1. Camera Api简单介绍
  2. 2. 拍照
  3. 3. 预览照片 
  4.  
  5. 一、 Camera Api简单介绍 
  6.  
  7. Camera选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的
  8. 字符串或图片URI形式返回。
  9. 方法：
  10. 1. camera.getPicture 拍照获取相册图片
  11. navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
  12. cameraSuccess：提供图像数据的onSuccess回调函数。
  13. cameraError：提供错误信息的onError回调函数。
  14. cameraOptions：定制摄像头设置的可选参数
  15. 2. camera.cleanup 清除拍照后设备的缓存图片
  16. navigator.camera.cleanup( cameraSuccess, cameraError );
  17. 3.cameraOptions参数：
  18. 定制摄像头设置的可选参数。
  19. quality : 存储图像的质量，范围是[0,100]。
  20. destinationType :选择返回数据的格式。
  21. sourceType :设定图片来源。data:image/jpeg;base64,
  22. allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有ios支持)
  23. encodingType :选择返回图像文件的编码方encodingType: Camera.EncodingType.JPEG
  24. targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度
  25. targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度
  26. saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册
  27. mediaType 设置选择媒体的类型
  28. cameraDirection 选择前置摄像头还是后置摄像头
  29. 注意：在Android中。
  30. 忽略allowEdit参数。 
  31.  
  32. Camera.PictureSourceType.PHOTOLIBRARY或
  33. Camera.PictureSourceType.SAVEDPHOTOALBUM都会显示同一个相集。 
  34.  
  35. . quality: Quality of the saved image, expressed as a range of 0-100, where 100
  36. is typically full resolution with no loss from file compression. (Number) (Note that
  37. information about the camera's resolution is unavailable.)
  38. . destinationType: Choose the format of the return value. Defined
  39. in navigator.camera.DestinationType (Number) 
  40.  
  41. Camera.DestinationType={
  42. DATA_URL :0, // Return image as base64-encoded string
  43. FILE_URI :1, // Return image file URI
  44. NATIVE_URI :2 // Return image native URI (e.g. assets-library://
  45. on iOS or content:// on Android)
  46. }; 
  47.  
  48. . sourceType: Set the source of the picture. Defined
  49. in navigator.camera.PictureSourceType (Number) 
  50.  
  51. Camera.PictureSourceType={
  52. PHOTOLIBRARY :0,//图库中获取
  53. CAMERA :1,//设备照相机中获取
  54. SAVEDPHOTOALBUM :2//从相册中获取
  55. }; 
  56.  
  57. . allowEdit: Allow simple editing of image before selection. (Boolean)
  58. . encodingType: Choose the returned image file's encoding. Defined
  59. in navigator.camera.EncodingType (Number) 
  60.  
  61. Camera.EncodingType={
  62. JPEG :0, // Return JPEG encoded image
  63. PNG :1 // Return PNG encoded image
  64. }; 
  65.  
  66. . targetWidth: Width in pixels to scale image. Must be used with targetHeight. 
  67.  
  68. Aspect ratio remains constant. (Number)
  69. . targetHeight: Height in pixels to scale image. Must be used with targetWidth.
  70. Aspect ratio remains constant. (Number)
  71. . mediaType: Set the type of media to select from. Only works
  72. when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM. Defined
  73. in nagivator.camera.MediaType (Number) 
  74.  
  75. Camera.MediaType={
  76. PICTURE:0, // allow selection of still pictures only. DEFAULT. Will
  77. return format specified via DestinationType
  78. VIDEO:1, // allow selection of video only, WILL ALWAYS RETURN
  79. FILE_URI
  80. ALLMEDIA :2 // allow selection from all media types
  81. }; 
  82.  
  83. . correctOrientation: Rotate the image to correct for the orientation of the device
  84. during capture. (Boolean)
  85. . saveToPhotoAlbum: Save the image to the photo album on the device after
  86. capture. (Boolean)
  87. . popoverOptions: iOS-only options that specify popover location in iPad.
  88. Defined in CameraPopoverOptions.
  89. . cameraDirection: Choose the camera to use (front- or back-facing). Defined
  90. in navigator.camera.Direction (Number) 
  91.  
  92. Camera.Direction={
  93. BACK :0, // Use the back-facing camera
  94. FRONT :1 // Use the front-facing camera
  95. }; 
  96.  
  97. Android Quirks 
  98.  
  99. . Ignores the allowEdit parameter.
  100. . Camera.PictureSourceType.PHOTOLIBRARY and Camera.PictureSourceType.SAVEDPHOTOALBUM both display the same photo album. 
  101.  
  102.  简单的列子：
  103. 1.拍照并获取Base64编码的图像: 
  104.  
  105. navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
  106. destinationType: Camera.DestinationType.DATA_URL
  107. });
  108. function onSuccess(imageData) {
  109. var image = document.getElementById('myImage');
  110. image.src = "data:image/jpeg;base64," + imageData;
  111. }
  112. function onFail(message) {
  113. alert('Failed because: ' + message);
  114. } 
  115.  
  116. 2.拍照并获取图像文件路径： 
  117.  
  118. navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
  119. destinationType: Camera.DestinationType.FILE_URI });
  120. function onSuccess(imageURI) {
  121. var image = document.getElementById('myImage');
  122. image.src = imageURI;
  123. }
  124. function onFail(message) {
  125. alert('Failed because: ' + message);
  126. } 
  127.  
  128. 3.一个完整的例子： 
  129.  
  130. <!DOCTYPE html>
  131. <html>
  132. <head>
  133. <title>Capture Photo</title>
  134. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  135. <script type="text/javascript" charset="utf-8">
  136. varpictureSource; //图片来源
  137. vardestinationType; //设置返回值的格式
  138. // 等待PhoneGap连接设备
  139. document.addEventListener("deviceready",onDeviceReady,false); 
  140.  
  141.  // PhoneGap准备就绪，可以使用！
  142. function onDeviceReady() {
  143. pictureSource=navigator.camera.PictureSourceType;
  144. destinationType=navigator.camera.DestinationType;
  145. }
  146. // 当成功获得一张照片的Base64编码数据后被调用
  147. function onPhotoDataSuccess(imageData) {
  148. // 取消注释以查看Base64编码的图像数据
  149. // console.log(imageData);
  150. // 获取图像句柄
  151. varsmallImage = document.getElementById('smallImage');
  152. // 取消隐藏的图像元素
  153. smallImage.style.display = 'block';
  154. // 显示拍摄的照片
  155. // 使用内嵌CSS规则来缩放图片
  156. smallImage.src = "data:image/jpeg;base64," + imageData;
  157. }
  158. // 当成功得到一张照片的URI后被调用
  159. function onPhotoURISuccess(imageURI) {
  160. // 取消注释以查看图片文件的URI
  161. // console.log(imageURI);
  162. // 获取图片句柄
  163. varlargeImage = document.getElementById('largeImage');
  164. // 取消隐藏的图像元素
  165. largeImage.style.display = 'block';
  166. // 显示拍摄的照片
  167. // 使用内嵌CSS规则来缩放图片
  168. largeImage.src = imageURI;
  169. }
  170. // “Capture Photo”按钮点击事件触发函数
  171. function capturePhoto() {
  172. // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
  173. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); 
  174.  
  175.  }
  176. // “Capture Editable Photo”按钮点击事件触发函数
  177. function capturePhotoEdit() {
  178. // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像
  179. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20,
  180. allowEdit: true });
  181. }
  182. //“From Photo Library”/“From Photo Album”按钮点击事件触发函数
  183. function getPhoto(source) {
  184. // 从设定的来源处获取图像文件URI
  185. navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
  186. destinationType: destinationType.FILE_URI,sourceType: source });
  187. }
  188. // 当有错误发生时触发此函数
  189. function onFail(mesage) {
  190. alert('Failed because: ' + message);
  191. }
  192. </script>
  193. </head>
  194. <body>
  195. <button"capturePhoto();">Capture Photo</button><br>
  196. <button"capturePhotoEdit();">Capture Editable Photo</button><br>
  197. <button"getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
  198. Library</button><br>
  199. <button"getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo
  200. Album</button><br>
  201. <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
  202. <img style="display:none;" id="largeImage" src="" />
  203. </body>
  204. </html> 
  205.  
  206. 二、 拍照 
  207.  
  208. function getPictureFromCamera()
  209. { 
  210.  
  211.  navigator.camera.getPicture(onSuccess, onFail, { quality: 50,destinationType:
  212. Camera.DestinationType.DATA_URL,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY });
  213. } 
  214.  
  215. 三、 预览照片 
  216.  
  217. function getPictureFromePhotoLibrary()
  218. {
  219. navigator.camera.getPicture(onSuccessFromLib, onFail, { allowEdit:true,quality:
  220. 90,destinationType:Camera.DestinationType.FILE_URI ,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY,targetHeight:288,targetWidth:288 });
  221. function onSuccessFromLib(imageURI)
  222. {
  223. alert("imageURI"+imageURI);
  224. var image = document.getElementById('myImage');
  225. image.src = imageURI;
  226. }
  227. }

　　

phonegap的照相机API的更多相关文章

  1. phonegap的照相机 API

    一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的 字符串或图片 URI 形式返回. 方法: 1. camera.getP ...

  2. 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）

    之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...

  3. PhoneGap 的文件 api

    一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...

  4. phonegap 的指南针 api Compass

    一. Compass 介绍方法参数   1.Compass 也就是,常说的指南针,又叫罗盘 2.方法 compass.getCurrentHeading compass.watchHeading co ...

  5. 新手的第一个phonegap Android应用

    对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525   手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...

  6. 构建通过 Database.com 提供技术支持的 PhoneGap 应用程序

    要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...

  7. 在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏

    一.在Android平台下搭建PhoneGap开发环境具体怎么搭建我这里就不详细说了,如有需要我后面再讲 . PhoneGap 官方地址有详细说明:http://www.phonegap.com. 在 ...

  8. [转]跨平台开发：PhoneGap移动开发框架初探

    目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...

  9. Android用PhoneGap封装webapp在android代码中实现连按退出和loadingpage

    用PhoneGap封装后的程序有一些瑕疵,比如启动时黑屏,菜单按钮和返回按钮不好控制等. PhoneGap也在github提交的它的源码(版本:2.8): https://github.com/apa ...

随机推荐

  1. Python编码问题整理【转】

    认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...

  2. 第一百零一节，JavaScript流程控制语句

    JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...

  3. UVa 1600 Patrol Robot (习题 6-5)

    传送门: https://uva.onlinejudge.org/external/16/1600.pdf 多状态广搜 网上题解: 给vis数组再加一维状态,表示当前还剩下的能够穿越的墙的次数,每次碰 ...

  4. ckeditor上传图片的注意点

    1.要在 ckeditor的  config.js 文件中加上 CKEDITOR.editorConfig = function( config ) { config.filebrowserImage ...

  5. 图的两种遍历：DFS&BFS

    DFS和BFS在图中的应用: 图连通性判定:路径的存在性:图中是否存在环:求图的最小生成树:求图的关键路径:求图的拓扑排序. DFS:简单的说,先一直往深处走,直到不能再深了,再从另一条路开始往深处走 ...

  6. 安卓.点击头像-->编辑个人姓名-->提交后.同时调用js关闭页面-->返回上一层

    $(document).ready(function() { $('#selfbtn').click(function(){ var u = navigator.userAgent; if (u.in ...

  7. 小菜鸟安装CocoaPods

    刚来到公司,以前没有用过CocoaPods. 参考的以下两篇文章,都是转载的. 第一篇比较偏技术性,叫做<Mac下CocoaPods安装步骤> http://blog.csdn.net/a ...

  8. Python笔记3-20151027

    函数的参数 Python的函数定义非常简单,但是灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数和关键字参数,使得函数定义出来的接口,不但能处理复杂的参数,还可以简化调用者的代码 ...

  9. 关于C/C++的四舍五入方向

    今天在刷题过程中发现了一个特别奇怪的现象,printf() 的精度控制不是按照4舍5入,而是按照5舍6入, 例如: printf("%.2f\n",0.145) printf(&q ...

  10. linux上安装配置samba服务器

    linux上安装配置samba服务器 在linux上安装配置samba服务器 在这给大家介绍一个不错的家伙,samba服务.如果您正在犯愁,如何在Windows和Linux之间实现资源共享,就请看看这 ...