phonegap的照相机 API
一、 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 :选择返回数据的格式。
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 :设定图片来源。data:image/jpeg;base64,
PHOTOLIBRARY :0,//拍完照后图片的路劲从图库中获取
CAMERA :1,//拍完照后图片的路劲从设备照相机中获取
SAVEDPHOTOALBUM :2//拍完照后图片的路劲从相册中获取
allowEdit :在选择图片进行操作之前允许对其进行简单编辑。(好像只有 ios 支持，在 Android 中，忽略 allowEdit 参数。)
encodingType :选择返回图像文件的编码方 encodingType: Camera.EncodingType.JPEG
targetWidth :以像素为单位的图像缩放宽度指定图片展示的时候的宽度
targetHeight :以像素为单位的图像缩放高度指定图片展示的时候的高度
saveToPhotoAlbum:拍完照片后是否将图像保存在设备上的相册
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
cameraDirection 选择前置摄像头还是后置摄像头
BACK :0, // Use the back-facing camera
FRONT :1 // Use the front-facing camera
Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
function myDeviceReadyListener(){
$('#btn_getPic').click(function(){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 70,
destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url 这里进行了编码，成功拍照获取图片路径对应的方式如下
//sourceType:Camera.PictureSourceType.Camera, //摄像机获取，调用拍照
sourceType:Camera.PictureSourceType.PHOTOLIBRARY, //从图库中选取图片，不用调用拍照
targetWidth:200,
targetHeight:200
}); })
}
//成功 回调函数里包含图片的地址
function onSuccess(imageURI){
alert(imageURI);
$('#img_pic').css('display','block');
$('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
//image.src = "data:image/jpeg;base64," + imageData; } //失败 回调函数李包含失败返回的信息
function onFail(message) {
alert('Failed because: ' + message);
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Camera</h1>
</div>
<div data-role="content">
<img style="dispaly:none" id="img_pic"/>
<a id="btn_getPic" href="#" data-role="button">拍照</a>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
function myDeviceReadyListener(){
$('#btn_getPic').click(function(){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 70,
destinationType: Camera.DestinationType.FILE_URI, //以文件地址返回url
sourceType:Camera.PictureSourceType.Camera,
targetWidth:300,
targetHeight:300
}); })
}
//成功
function onSuccess(imageURI) {
alert(imageURI);
$('#img_pic').css('display','block');
$('#img_pic').attr("src",imageURI);//这种获取图片路径的方式对应的是destinationType: Camera.DestinationType.FILE_URI } //失败
function onFail(message) {
alert('Failed because: ' + message);
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Camera</h1>
</div>
<div data-role="content">
<img style="dispaly:none" id="img_pic"/>
<a id="btn_getPic" href="#" data-role="button">拍照</a>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
function myDeviceReadyListener(){
$('#btn_getPic').click(function(){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 70,
destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url
sourceType:Camera.PictureSourceType.Camera,
targetWidth:100,
targetHeight:100
}); })
}
//成功
function onSuccess(imageURI){
alert(imageURI);
$('#img_pic').css('display','block');
$('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
//image.src = "data:image/jpeg;base64," + imageData; } //失败
function onFail(message) {
alert('Failed because: ' + message);
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Camera</h1>
</div>
<div data-role="content">
<img style="dispaly:none" id="img_pic"/>
<a id="btn_getPic" href="#" data-role="button">拍照</a>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
});
function myDeviceReadyListener(){
//从相机拍照获取 base64 编码方式返回
$('#btn_getPic').click(function(){
navigator.camera.getPicture(onSuccess1, onFail, {
quality: 70,
destinationType: Camera.DestinationType.DATA_URL, //以文件地址返回url
sourceType:Camera.PictureSourceType.Camera,
targetWidth:100,
targetHeight:100
}); })
//从图库获取 url
$('#btn_getLibiaryPic').click(function(){
navigator.camera.getPicture(onSuccess2, onFail, {
quality: 70,
destinationType: Camera.DestinationType.FILE_URL, //以文件地址返回url，如果选择的媒体类型是视频，只能是这个方式：FILE_URL
sourceType:Camera.PictureSourceType.PHOTOLIBRARY,
mediaType:Camera.MediaType.VIDEO,
targetWidth:100,
targetHeight:100
}); }) }
//成功 相机
function onSuccess1(imageURI){
alert(imageURI);
$('#img_pic').css('display','block');
$('#img_pic').attr("src","data:image/jpeg;base64," + imageURI);
//image.src = "data:image/jpeg;base64," + imageData; }
//成功 图库
function onSuccess2(imageURI){
alert(imageURI);
//$('#img_pic').css('display','block');
// $('#img_pic').attr("src",imageURI); $("#videocontainer").append("<video height=240 width=300 controls='controls' src='"+imageURI+"' >your browder doesn't support video tag</video>");
//image.src = "data:image/jpeg;base64," + imageData; } //失败
function onFail(message) {
alert('Failed because: ' + message);
} </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Camera</h1>
</div>
<div data-role="content">
<img style="dispaly:none" id="img_pic"/>
<a id="btn_getPic" href="#" data-role="button">拍照</a>
<a id="btn_getLibiaryPic" href="#" data-role="button">本地预览</a>
<div id="videocontainer">
</div>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
phonegap的照相机 API的更多相关文章
- phonegap的照相机API
1. Camera Api简单介绍 2. 拍照 3. 预览照片 一. Camera Api简单介绍 Camera选择使用摄像头拍照,或从设备相册中获取一张照片.图片以base64编码的 字符串或图片U ...
- 小白学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 ...
随机推荐
- 使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番 关于webpack2.0和1.x的区别概括起来就是tree shaki ...
- PostgreSQL On Windows Process Connection Performance
本文主要对PostgreSql在Windows下的连接测试. 测试环境: Win7 x64, PostgreSql 10.1 x64 测试语言: VS2015 C# 因为Pg的数据库连接是开启进程来处 ...
- 铵钮提交事件PostBack之后，一些动态加载的物件丢失
今早起来,发现skype有网友留言,情况大约如下,不过Insus.NET还是先感谢网友的测试.http://www.cnblogs.com/insus/p/3193619.html 如果你有看此篇博 ...
- Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知.本篇将续前面几篇基础动画之上,详细 ...
- springMVC基于注解的控制器
springMVC基于注解的控制器 springMVC基于注解的控制器的优点有两个: 1.控制器可以处理多个动作,这就允许将相关操作写在一个类中. 2.控制器的请求映射不需要存储在配置文件中.使用re ...
- hdu 1565 方格取数(1) 状态压缩dp
方格取数(1) Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- Python入门-初始面向对象
之前我们代码基本上都是面向过程的,今天我们就来初始一下python中一个重要的内容:面向对象 一.面向对象和面向过程(重点理解) 1.面向过程: 一切以事物的流程为核心. 核心是"过程&qu ...
- 基础架构之日志管理平台搭建及java&net使用
在现代化的软件开发流程中,日志显得非常的重要,不可能再零散的游离在各个项目中,等查看日志的时候再登录服务器去到特定的目录去查看,这显然很繁琐且效率低下,所有整合一套日志管理平台,也显得非常重要,这篇文 ...
- 【阿里云产品公测】云引擎ACE公测感受
听说阿里云ACE开始公测了,怀着激动的心情赶紧试用了一下. 这是我用ACE做出来的效果:http://haoyuming.aliapp.com/ 大家点点看看啊 A*W/Q<~I :eSwX ...
- android 实现类似微信缓存和即时更新好友头像
引言 使用微信时我们会发现,首次进入微信的好友列表时,会加载好友头像,但是再次进入时,就不用重新加载了,而且其他页面都不用重新加载,说明微信的好友头像是缓存在本地的,然后好友修改头像后,又会及时的更新 ...