PhoneGap API介绍:Camera

本文将介绍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

时间: 2024-08-05 20:18:12

PhoneGap API介绍:Camera的相关文章

PhoneGap API介绍:Events

事件类型: backbutton deviceready menubutton pause resume searchbutton online offline backbutton 当用户在Android系统上点击后退按钮的时候触发此事件. document.addEventListener("backbutton", yourCallbackFunction, false); 详述: 如果你需要在Android系统上重载默认后退按钮的行为,可以通过注册一个事件监听器来监听"

PhoneGap API介绍:File

本文将介绍PhoneGap API——File:通过JavaScript截获本地文件系统.File是用于读取.写入和浏览文件系统层次结构的PhoneGap API. 对象: DirectoryEntry DirectoryReader File FileEntry FileError FileReader FileSystem FileTransfer FileTransferError FileUploadOptions FileUploadResult FileWriter Flags Lo

PhoneGap API 之多媒体

一. MediaApi 简单介绍 PhoneGap API Media 对象提供录制和回放设备上的音频文件的能力 参数: var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]); src: 一个包含音频内容的 URI (媒体音乐的播放器) mediaSuccess: (可选项)当一个 Media 对象完成当前的播放.录制或停止操作时触 发的回调函数 mediaError:(可选项)当出现错误时调用的回调函数 me

Linux平台上SQLite数据库教程(二)——C语言API介绍

Linux平台上SQLite数据库教程(二)--C语言API介绍 前言:本文将介绍几个基本的SQLite3数据库的C语言API接口,主要用到两个文件:sqlite3.c.sqlite3.h.源码地址:https://github.com/AnSwErYWJ/SQLite. 打开数据库 1.原型: int sqlite3_open( const char* filename, /* 数据库文件名, 必须为 UTF-8 格式 */ sqlite3** ppDB /* 输出: SQLite 数据库句柄

CasperJS API介绍

一.使用标准JavaScript对象作为可选参数构造CasperJS实例 1 直接在create()函数里面使用 var casper = require('casper').create({ clientScripts: [ 'includes/jquery.js', // These two scripts will be injected in remote 'includes/underscore.js' // DOM on every request ], pageSettings:

WKWebView与JS交互实战技巧之API介绍

前言 前一章我给大家介绍了iOS与HTML5的交互,用的是UIWebView,今天给大家介绍另外一种基于 iOS 8 新推出的 WKWebView 组件,构建出自己的混合开发框架. WKWebView 简介 WKWebView 是苹果在 iOS 8 中引入的新组件,目的是给出一个新的高性能的 Web View 解决方案,摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题. 苹果将 UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议,引入

CEPH OBJECTSTORE API介绍

Thomas是本人在Ceph中国社区翻译小组所用的笔名,该文首次发布在Ceph中国社区,现转载到本人博客,以供大家传阅 CEPH OBJECTSTORE API介绍 本文由 Ceph中国社区-Thomas翻译,陈晓熹校稿 . 英文出处:THE CEPH OBJECTSTORE API 欢迎加入 翻译小组 简介 object store是Ceph OSD的一部分,它完成实际的数据存储.当前有三种不同的object store可用: FileStore: 文件系统+日志后备的存储 KeyValueS

SharePoint 2013 Excel Services REST API介绍

原文:SharePoint 2013 Excel Services REST API介绍 前言:Excel Services 中的 REST API 是 Microsoft SharePoint Server 2010 的新增项.利用 REST API,可通过 URL 直接访问工作簿部件或元素. 一.REST 服务基于两个要求: 用于定位网络资源的寻址方案 用于返回这些资源的表示形式的方法 二.REST URL基本URI的三个组成部分是: REST aspx 页 URI:http://<Serv

Android无线测试之—UiAutomator UiScrollable API介绍三

获取列表子元素 一.相关API介绍 返回值 API 描述 UiObject getChildByDescription(UiSelector childPattern, String text, boolean allowScrollSearch) 是否允许滚动查看获取具备UiSelector条件元素集合后再以文本描述条件查找对象 UiObject getChildByDescription(UiSelector childPattern, String text) 默认滚动获取具备UiSele