phonegap的照相机API
1. Camera Api简单介绍
2. 拍照
3. 预览照片 一、 Camera Api简单介绍 Camera选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的
字符串或图片URI形式返回。
方法：
1. camera.getPicture 拍照获取相册图片
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraSuccess：提供图像数据的onSuccess回调函数。
cameraError：提供错误信息的onError回调函数。
cameraOptions：定制摄像头设置的可选参数
2. camera.cleanup 清除拍照后设备的缓存图片
navigator.camera.cleanup( cameraSuccess, cameraError );
3.cameraOptions参数：
定制摄像头设置的可选参数。
quality : 存储图像的质量，范围是[0,100]。
destinationType :选择返回数据的格式。
sourceType :设定图片来源。data:image/jpeg;base64,
allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有ios支持)
encodingType :选择返回图像文件的编码方encodingType: Camera.EncodingType.JPEG
targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度
targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度
saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册
mediaType 设置选择媒体的类型
cameraDirection 选择前置摄像头还是后置摄像头
注意：在Android中。
忽略allowEdit参数。 Camera.PictureSourceType.PHOTOLIBRARY或
Camera.PictureSourceType.SAVEDPHOTOALBUM都会显示同一个相集。 . quality: Quality of the saved image, expressed as a range of 0-100, where 100
is typically full resolution with no loss from file compression. (Number) (Note that
information about the camera's resolution is unavailable.)
. destinationType: Choose the format of the return value. Defined
in navigator.camera.DestinationType (Number) Camera.DestinationType={
DATA_URL :0, // Return image as base64-encoded string
FILE_URI :1, // Return image file URI
NATIVE_URI :2 // Return image native URI (e.g. assets-library://
on iOS or content:// on Android)
}; . sourceType: Set the source of the picture. Defined
in navigator.camera.PictureSourceType (Number) Camera.PictureSourceType={
PHOTOLIBRARY :0,//图库中获取
CAMERA :1,//设备照相机中获取
SAVEDPHOTOALBUM :2//从相册中获取
}; . allowEdit: Allow simple editing of image before selection. (Boolean)
. encodingType: Choose the returned image file's encoding. Defined
in navigator.camera.EncodingType (Number) Camera.EncodingType={
JPEG :0, // Return JPEG encoded image
PNG :1 // Return PNG encoded image
}; . targetWidth: Width in pixels to scale image. Must be used with targetHeight. Aspect ratio remains constant. (Number)
. targetHeight: Height in pixels to scale image. Must be used with targetWidth.
Aspect ratio remains constant. (Number)
. mediaType: Set the type of media to select from. Only works
when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM. Defined
in nagivator.camera.MediaType (Number) Camera.MediaType={
PICTURE:0, // allow selection of still pictures only. DEFAULT. Will
return format specified via DestinationType
VIDEO:1, // allow selection of video only, WILL ALWAYS RETURN
FILE_URI
ALLMEDIA :2 // allow selection from all media types
}; . correctOrientation: Rotate the image to correct for the orientation of the device
during capture. (Boolean)
. saveToPhotoAlbum: Save the image to the photo album on the device after
capture. (Boolean)
. popoverOptions: iOS-only options that specify popover location in iPad.
Defined in CameraPopoverOptions.
. cameraDirection: Choose the camera to use (front- or back-facing). Defined
in navigator.camera.Direction (Number) Camera.Direction={
BACK :0, // Use the back-facing camera
FRONT :1 // Use the front-facing camera
}; Android Quirks . Ignores the allowEdit parameter.
. Camera.PictureSourceType.PHOTOLIBRARY and Camera.PictureSourceType.SAVEDPHOTOALBUM both display the same photo album. 简单的列子：
1.拍照并获取Base64编码的图像: navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
} 2.拍照并获取图像文件路径： 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);
} 3.一个完整的例子： <!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">
varpictureSource; //图片来源
vardestinationType; //设置返回值的格式
// 等待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);
// 获取图像句柄
varsmallImage = document.getElementById('smallImage');
// 取消隐藏的图像元素
smallImage.style.display = 'block';
// 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// 当成功得到一张照片的URI后被调用
function onPhotoURISuccess(imageURI) {
// 取消注释以查看图片文件的URI
// console.log(imageURI);
// 获取图片句柄
varlargeImage = 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"capturePhoto();">Capture Photo</button><br>
<button"capturePhotoEdit();">Capture Editable Photo</button><br>
<button"getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button><br>
<button"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> 二、 拍照 function getPictureFromCamera()
{ navigator.camera.getPicture(onSuccess, onFail, { quality: 50,destinationType:
Camera.DestinationType.DATA_URL,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY });
} 三、 预览照片 function getPictureFromePhotoLibrary()
{
navigator.camera.getPicture(onSuccessFromLib, onFail, { allowEdit:true,quality:
90,destinationType:Camera.DestinationType.FILE_URI ,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY,targetHeight:288,targetWidth:288 });
function onSuccessFromLib(imageURI)
{
alert("imageURI"+imageURI);
var image = document.getElementById('myImage');
image.src = imageURI;
}
}
phonegap的照相机API的更多相关文章
- phonegap的照相机 API
一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的 字符串或图片 URI 形式返回. 方法: 1. camera.getP ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
- PhoneGap 的文件 api
一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...
- phonegap 的指南针 api Compass
一. Compass 介绍方法参数 1.Compass 也就是,常说的指南针,又叫罗盘 2.方法 compass.getCurrentHeading compass.watchHeading co ...
- 新手的第一个phonegap Android应用
对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525 手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...
- 构建通过 Database.com 提供技术支持的 PhoneGap 应用程序
要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...
- 在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏
一.在Android平台下搭建PhoneGap开发环境具体怎么搭建我这里就不详细说了,如有需要我后面再讲 . PhoneGap 官方地址有详细说明:http://www.phonegap.com. 在 ...
- [转]跨平台开发：PhoneGap移动开发框架初探
目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iph ...
- Android用PhoneGap封装webapp在android代码中实现连按退出和loadingpage
用PhoneGap封装后的程序有一些瑕疵,比如启动时黑屏,菜单按钮和返回按钮不好控制等. PhoneGap也在github提交的它的源码(版本:2.8): https://github.com/apa ...
随机推荐
- Mybatis 获取插入记录的自增长ID
1.在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名,而不是表格的字段名. <ins ...
- 【C++】最大子列和
此题来自<数据结构与算法>,书中一共介绍了四种方法,这里贴出两种. 1.分治递归,对本题来说,虽然有更好的算法,但是用此题理解分治算法感觉挺有用 #include <iostream ...
- POJ 2234 Matches Game（取火柴博弈1）
传送门 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
- [POJ] String Matching
String Matching Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4074 Accepted: 2077 D ...
- luci编译错误
make[3]: Entering directory '/home/hbg/test1214/package/feeds/luci/luci'*** Repository layout change ...
- openwrt 汉化
make menuconfig 添加luci LuCI--->Collections----- <*> luci 添加luci的中文语言包 LuCI--->Translatio ...
- Python 邮件发送
python发送各类邮件的主要方法 python中email模块使得处理邮件变得比较简单,今天着重学习了一下发送邮件的具体做法,这里写写自己的的心得,也请高手给些指点. 一.相关模块介绍 ...
- 588. [NOIP1999] 拦截导弹
588. [NOIP1999] 拦截导弹 ★ 输入文件:missile.in 输出文件:missile.out 简单对比 时间限制:1 s 内存限制:128 MB 题目描述 某国为了防御敌国的导 ...
- 设计模式5 合成模式 COMPOSITE
一个合成是一组对象,其中某些对象可能包含其他对象. 目的:可以让客户程序把单个基本对象和对象的合成用一种统一的方式处理. 5.1 普通合成 Technorati Tags: adsf
- php 验证码类
<?php class Vcode { private $width; //宽 private $height; //高 private $num; //数量 private ...