本文将介绍PhoneGap API——Camera:使用设备的摄像头采集照片,对象提供对设备默认摄像头应用程序的访问。

方法:

camera.getPicture

参数:

cameraSuccess

cameraError

cameraOptions

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的更多相关文章

  1. PhoneGap API介绍:File

    本文将介绍PhoneGap API——File:通过JavaScript截获本地文件系统.File是用于读取.写入和浏览文件系统层次结构的PhoneGap API. 对象: DirectoryEntr ...

  2. PhoneGap学习地址 / PhoneGap API介绍:Events

    http://blog.csdn.net/phonegapcn 事件类型: backbutton deviceready menubutton pause resume searchbutton on ...

  3. PhoneGap API介绍:Events

    事件类型: backbutton deviceready menubutton pause resume searchbutton online offline backbutton 当用户在Andr ...

  4. tensorflow中slim模块api介绍

    tensorflow中slim模块api介绍 翻译 2017年08月29日 20:13:35   http://blog.csdn.net/guvcolie/article/details/77686 ...

  5. PhoneGap API 之多媒体

    一. MediaApi 简单介绍 PhoneGap API Media 对象提供录制和回放设备上的音频文件的能力 参数: var media = new Media(src, mediaSuccess ...

  6. 常用ArcGIS for Silverlight 开发API介绍

    1.API介绍 2.Map对象  3.Layer对象 4.Symbol对象 5.Task对象

  7. Servlet基础(一) Servlet简介 关键API介绍及结合源码讲解

    Servlet基础(一) Servlet基础和关键的API介绍 Servlet简介 Java Servlet是和平台无关的服务器端组件,它运行在Servlet容器中. Servlet容器负责Servl ...

  8. python学习笔记(win32print API介绍)

    最近博主在研究用python控制打印机 这里整理下win32print的API介绍,官网地址http://timgolden.me.uk/pywin32-docs/win32print.html Op ...

  9. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

随机推荐

  1. 利用AWS的EC2实例配合Putty访问Google账户

    首先,我们需要一个amazon的帐号,该帐号可以开始AWS服务,第一次使用时需要绑定信用卡并扣1美元,然后再退还到我们的卡中,就是要验证一下信用卡帐户的有效性哦.有了这个帐号就可以尽情地享受AWS提供 ...

  2. Python高级编程-使用SQLite

    SQLite是一种嵌入式数据库,它的数据库就是一个文件.由于SQLite本身是C写的,而且体积很小,所以,经常被集成到各种应用程序中,甚至在iOS和Android的App中都可以集成. Python就 ...

  3. 小茜(xi)的减肥之路

    Description 今天,多年未见的小钧和小江在街头偶遇,小江想看看当年那个蠢蠢的小钧有没有变聪明一些,他灵机一动,说:“当初小茜立了个flag,说一定要减肥,她想着第一天跑一米,第二天跑两米,第 ...

  4. 软工2017第六周团队协作——个人PSP

    10.20 --10.26本周例行报告 1.PSP(personal software process )个人软件过程. 类型 任务 开始时间                结束时间 中断时间 实际用 ...

  5. 11.24Daily Scrum

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.990 测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.991 测试 王宇杰 负责后台代码测 ...

  6. TensorFlow安装解惑

    本文整理自网络,若有侵犯请告知. 1.安装环境 目前TensorFlow社区推荐的环境是Ubuntu, 但是TensorFlow同时支持Mac,Windows上的安装部署. 2.关于GPU版本 因为深 ...

  7. Java版office文档在线预览

    java将office文档pdf文档转换成swf文件在线预览 第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux ...

  8. com技术学习

    百度百科概念 COM是微软公司为了计算机工业的软件生产更加符合人类的行为方式开发的一种新的软件开发技术.在COM构架下,人们可以开发出各种各样的功能专一的组件,然后将它们按照需要组合起来,构成复杂的应 ...

  9. iOS开发UUIView动画方法总结

    #动画设置 UIView动画实现 @interface ViewController () @property (weak, nonatomic) IBOutlet UIView *myView; @ ...

  10. erlang+thrift配合开发

    I  think, thrift is a  tcp/ip based Client-Server architecture multi-languages supported RPC framewo ...