PhoneGap API介绍:Camera
本文将介绍PhoneGap API——Camera:使用设备的摄像头采集照片,对象提供对设备默认摄像头应用程序的访问。
方法:
参数:
camera.getPicture
选择使用摄像头拍照,或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。
简单的范例:
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编码的图像:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
拍照并获取图像文件路径:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
完整的范例:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8"> var pictureSource; //图片来源
var destinationType; //设置返回值的格式 // 等待PhoneGap连接设备
document.addEventListener("deviceready",onDeviceReady,false); // PhoneGap准备就绪,可以使用!
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
} // 当成功获得一张照片的Base64编码数据后被调用
function onPhotoDataSuccess(imageData) { // 取消注释以查看Base64编码的图像数据
// console.log(imageData);
// 获取图像句柄
var smallImage = document.getElementById('smallImage'); // 取消隐藏的图像元素
smallImage.style.display = 'block'; // 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
smallImage.src = "data:image/jpeg;base64," + imageData;
} // 当成功得到一张照片的URI后被调用
function onPhotoURISuccess(imageURI) { // 取消注释以查看图片文件的URI
// console.log(imageURI);
// 获取图片句柄
var largeImage = document.getElementById('largeImage'); // 取消隐藏的图像元素
largeImage.style.display = 'block'; // 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
largeImage.src = imageURI;
} // “Capture Photo”按钮点击事件触发函数
function capturePhoto() { // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的图像
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
} // “Capture Editable Photo”按钮点击事件触发函数
function capturePhotoEdit() { // 使用设备上的摄像头拍照,并获得Base64编码字符串格式的可编辑图像
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
} //“From Photo Library”/“From Photo Album”按钮点击事件触发函数
function getPhoto(source) { // 从设定的来源处获取图像文件URI
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,sourceType: source });
} // 当有错误发生时触发此函数
function onFail(mesage) {
alert('Failed because: ' + message);
} </script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
cameraSuccess
提供图像数据的onSuccess回调函数。
function(imageData) {
// 对图像进行处理
}
参数:
imageData:根据cameraOptions的设定值,为Base64编码的图像数据或图像文件的URI。(字符串类型)
范例:
// 显示图片
function cameraCallback(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
cameraError
提供错误信息的onError回调函数。
function(message) {
// 显示有用信息
}
参数:
message:设备本地代码提供的错误信息。(字符串类型)
cameraOptions
定制摄像头设置的可选参数。
{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWidth : 100,
targetHeight : 100};
选项:
quality:存储图像的质量,范围是[0,100]。(数字类型)
destinationType:选择返回数据的格式。通过navigator.camera.DestinationType进行定义。(数字类型)
Camera.DestinationType = {
DATA_URL : 0, //返回Base64编码字符串的图像数据
FILE_URI : 1 //返回图像文件的URI
}
sourceType:设定图片来源。通过nagivator.camera.PictureSourceType进行定义。(数字类型)
Camera.PictureSourceType = {
PHOTOLIBRARY : 0,
CAMERA : 1,
SAVEDPHOTOALBUM : 2
}
allowEdit:在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)
EncodingType:选择返回图像文件的编码方式,通过navigator.camera.EncodingType进行定义。(数字类型)
Camera.EncodingType = {
JPEG : 0, // 返回JPEG格式图片
PNG : 1 // 返回PNG格式图片
};
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的接口来删除该目录。
原文来自:http://mobile.51cto.com/others-308272.htm#cameraSuccess
PhoneGap API介绍:Camera的更多相关文章
- PhoneGap API介绍:File
本文将介绍PhoneGap API——File:通过JavaScript截获本地文件系统.File是用于读取.写入和浏览文件系统层次结构的PhoneGap API. 对象: DirectoryEntr ...
- PhoneGap学习地址 / PhoneGap API介绍:Events
http://blog.csdn.net/phonegapcn 事件类型: backbutton deviceready menubutton pause resume searchbutton on ...
- PhoneGap API介绍:Events
事件类型: backbutton deviceready menubutton pause resume searchbutton online offline backbutton 当用户在Andr ...
- tensorflow中slim模块api介绍
tensorflow中slim模块api介绍 翻译 2017年08月29日 20:13:35 http://blog.csdn.net/guvcolie/article/details/77686 ...
- PhoneGap API 之多媒体
一. MediaApi 简单介绍 PhoneGap API Media 对象提供录制和回放设备上的音频文件的能力 参数: var media = new Media(src, mediaSuccess ...
- 常用ArcGIS for Silverlight 开发API介绍
1.API介绍 2.Map对象 3.Layer对象 4.Symbol对象 5.Task对象
- Servlet基础(一) Servlet简介 关键API介绍及结合源码讲解
Servlet基础(一) Servlet基础和关键的API介绍 Servlet简介 Java Servlet是和平台无关的服务器端组件,它运行在Servlet容器中. Servlet容器负责Servl ...
- python学习笔记(win32print API介绍)
最近博主在研究用python控制打印机 这里整理下win32print的API介绍,官网地址http://timgolden.me.uk/pywin32-docs/win32print.html Op ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
随机推荐
- 关于Python 中的 if 语句
学习Python,最开始我们都是先从函数学起,Python教程中有很多函数,if算是其中之一. 可能最为人所熟知的编程语句就是 if 语句了.例如: >>> >>> ...
- java 实现redis缓存
由于项目加载时请求数据量过大,造成页面加载很慢.采用redis作缓存,使二次访问时页面,直接取redis缓存. 1.redis连接参数 2.连接redis,设置库 3.配置文件开启缓存 4.mappe ...
- 爬虫2.1-scrapy框架-两种爬虫对比
目录 scrapy框架-两种爬虫对比和大概流程 1. 传统spider爬虫 2. crawl型爬虫 3. 循环页面请求 4. scrapy框架爬虫的大致流程 scrapy框架-两种爬虫对比和大概流程 ...
- Java三种编译方式
Java程序代码需要编译后才能在虚拟机中运行,编译涉及到非常多的知识层面:编译原理.语言规范.虚拟机规范.本地机器码优化等:了解编译过程有利于了解整个Java运行机制,不仅可以使得我们编写出更优秀的代 ...
- 为什么安装beego和框架的失败 以及常用命令
1.安装了几个版本,版本之间相互影响. 把没用的删掉 2.网上找的教程存在问题. 都是相互抄袭.最权威的还是官网. which go rm -rf test/ echo path 获取路径 vim ~ ...
- 面试应该get这三大技能
链接:https://www.nowcoder.com/discuss/84391?type=0&order=3&pos=16&page=0 一.自我介绍凸显学业背景中的隐含信 ...
- 六: Image Viewer 离线镜像查看器
参考:http://hadoop.apache.org/docs/r2.6.3/hadoop-project-dist/hadoop-hdfs/HdfsImageViewer.html 离线镜像查 ...
- OpenCV学习5-----使用Mat合并多张图像
最近做实验需要对比实验结果,需要将几张图片拼在一起,直观对比. 尝试用OpenCV解决. 核心思想其实是 声明一个足够大的,正好容纳下那几张图片的mat,然后将拼图依次copy到大图片相应的位置. ...
- Hybrid APP基础篇(五)->JSBridge实现示例
说明 JSBridge实现示例 目录 前言 参考来源 楔子 JS实现部分 说明 实现 Android实现部分 说明 JSBridge类 实现 Callback类 实现 Webview容器关键代码 实现 ...
- Beta版本软件使用说明
北京航空航天大学计算机学院 远航1617 小组 产品版本: Beta版本 产品名称:Crawling is going on 文档作者:杨帆 文档日期:2013/12/24 1. 引言 1.1 ...