本文将介绍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. lesson 22 by heart

    lesson 22 by heart on end = continuously 连续不断地 know/learn sth by heart 记忆sth falter: speak hesitantl ...

  2. java 流 文件 IO

    Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...

  3. @Configuration和@Bean

    @Configuration可理解为用spring的时候xml里面的标签 @Bean可理解为用spring的时候xml里面的标签 Spring Boot不是spring的加强版,所以@Configur ...

  4. Ext JS 6学习文档-第7章-图表

    Ext JS 6学习文档-第7章-图表 使用图表 本章中将探索在 ExtJS 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...

  5. css修改placeholder的样式

    css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...

  6. 将代码上传到GitHub

    网上看了很多资料,都是用的命令行,比较难看懂,自己摸索了一下怎么样在图形界面上操作.下面记录的只是简单的如何把本地仓库直接上传到服务器上. 在mac上下载个GitHub Mac客户端,安装好后运行,输 ...

  7. 开启假期JAVA之路

    . 从最基础的JAVA开始学起,已经上了三节课啦!希望在课程结束后能完成一个令自己满意的连连看项目,期待ing~ 慢慢的从简单的代码上手了~ . 用循环输出等腰三角形的效果 import java.u ...

  8. j2ee—框架（1）：Servlet+JSP实现基本的登录功能（v1.0）

    主要分为四个部分:LoginController.web.xml.login.jsp和login_success.jsp(login_fail.jsp). 第一部分 LoginController p ...

  9. css那些事儿2 经典两列布局

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  10. kafka启动出现:Unsupported major.minor version 52.0 错误

    具体的错误输出: Exception in thread "main" java.lang.UnsupportedClassVersionError: kafka/Kafka : ...