本文将介绍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. hihocoder刷题 扫雷游戏

    题目1 : 扫雷游戏 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个N × N的方格矩阵,其中每个格子或者是'*',表示该位置有一个地雷:或者是'.',表示该位 ...

  2. Office 365 E3功能

    本文简要总结了Office 365E3的功能

  3. Apache——访问控制

    Order 指定执行允许访问规则和拒绝访问规则 Deny 定义拒绝访问列表 Allow 定义允许访问列表 Order allow,deny  先执行允许,再执行拒绝 Order deny,allow ...

  4. LeetCode 144 ——二叉树的前序遍历

    1. 题目 2. 解答 2.1. 递归法 定义一个存放树中数据的向量 data,从根节点开始,如果节点不为空,那么 将当前节点的数值加入到 data 中 递归得到其左子树的数据向量 temp,将 te ...

  5. MongoDB3.2 集群搭建

    一.集群的理论知识 1.1 集群成员 MongoDB的集群类似于GreenPlum集群,由一个入口节点负责任务分发与结果统计,分片结节负责执行任务.不同GP,多了一个config servers. 集 ...

  6. [leetcode-783-Minimum Distance Between BST Nodes]

    Given a Binary Search Tree (BST) with the root node root, return the minimum difference between the ...

  7. HDU 2485 Destroying the bus stations(!最大流∩!费用流∩搜索)

    Description Gabiluso is one of the greatest spies in his country. Now he’s trying to complete an “im ...

  8. 默认初始化&拷贝初始化&直接初始化&值初始化&列表初始化

    一.各种初始化的形式 /* 定义变量形式一:不指定初始值 */ int a; // 默认初始化 /* 定义变量形式二:指定初始值 */ int b = 1; // 拷贝初始化 int b(1); // ...

  9. Fafa and the Gates(模拟)

    Two neighboring kingdoms decided to build a wall between them with some gates to enable the citizens ...

  10. Ubuntu录制gif动态图

    大神写博客的时候通常一个Demo会附带一个动态图展示效果.在windows和mac上应该很容易找到录制工具,下面记录一下我在ubuntu下录制gif的过程. 下载byzanz录制工具 在ubuntu软 ...