跨平台移动开发_PhoneGap API Camera 使用摄像头采集照片.
camera对象提供对设备默认摄像头应用程序的访问。
程序运行效果
相关代码
<!DOCTYPE html>
<html>
<head>
<title>
PhoneGap Device Ready Example
</title>
<link
href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"
rel="stylesheet"
type="text/css"/>
<link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/> <script src="content/js/jquery.js" type="text/javascript">
</script>
<script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">
</script>
<script src="content/js/cordova.js" type="text/javascript">
</script>
<script type="text/javascript">
//提示信息
function showAlert(text) {
$.mobile.loading( "show", {
text: text,
textVisible: true,
theme: "b",
textonly: true
});
}
function Alert(text) {
console.log('Alert');
console.log('text');
showAlert(text);
} //退出app
function exitApp() {
console.log('exitApp');
navigator.app.exitApp();
}
</script>
<script type="text/javascript">
var pictureSource; //图片来源
var destinationType; //设置返回值的格式
$(function(){
//当PhoneGap被完全加载后会触发该事件。
document.addEventListener('deviceready',onDeviceReady,false); })
// PhoneGap准备就绪，可以使用！
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
document.addEventListener('backbutton',Backbutton,false);
}
function Backbutton(){
Alert('再次点击返回键切换到桌面!'); document.removeEventListener("backbutton", Backbutton, false);
document.addEventListener("backbutton", exitApp, false); var intervalID = window.setTimeout(function() {
$.mobile.loading( "hide" );
window.clearTimeout(intervalID);
document.removeEventListener("backbutton", exitApp, false);
document.addEventListener("backbutton", Backbutton, false);
}, 3000); }
// 当成功获得一张照片的Base64编码数据后被调用
function onPhotoDataSuccess(imageData) {
alert('imageURI: ' + imageURI);
// 取消注释以查看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);
alert('imageURI: ' + imageURI);
// 获取图片句柄
var largeImage = document.getElementById('largeImage'); // 取消隐藏的图像元素
largeImage.style.display = 'block'; // 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
largeImage.src = imageURI;
} // “Capture Photo”按钮点击事件触发函数
function capturePhoto() {
// 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
navigator.camera.getPicture(onPhotoURISuccess,onFail, { quality: 50 });
} //“From Photo Library”/“From Photo Album”按钮点击事件触发函数
function getPhoto(source) { // 从设定的来源处获取图像文件URI //如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。
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();">
拍照
</button>
<br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
选择图片
</button>
<br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">
选择照片
</button>
<br>
<img style="display:none;width:250px;height:250px;" id="smallImage" src="" />
<img style="display:none;width:250px;height:250px;" id="largeImage" src="" />
</body>
</html>
源代码示例包[调试通过]
声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。
跨平台移动开发_PhoneGap API Camera 使用摄像头采集照片.的更多相关文章
- 跨平台移动开发_PhoneGap API 事件类型
PhoneGap API Events backbuttondevicereadymenubuttonpauseresumeonlineofflinebatterycriticalbatterylow ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- 跨平台移动开发_PhoneGap 警告,通知,鸣叫,振动4 种通知类型
创建鸣叫 使用 confirmation.beep 创建鸣叫 function playBeep() { navigator.notification.beep(1); } 创建振动 使用 ...
- 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果
PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...
- 跨平台移动开发_PhoneGap 使用Accelerometer 加速器
使用Accelerometer 加速器效果图 示例代码 <!DOCTYPE html> <html> <head> <title> Cude Phone ...
- 【视频开发】【Live555】摄像头采集，264编码，live555直播
加入 摄像头采集和264编码,再使用live555直播 1.摄像头采集和264编码 将x264改成编码一帧的接口,码流不写入文件而是直接写入内存中(int Encode_frame 函数中). /* ...
- 【视频开发】【Live555】摄像头采集，264编码，live555直播（0）
参看 有关live555 1.首先需要修改live555,定义从 内存中直接获取source而不是从文件读取source的类. 自己实现的类命名为 H264FramedLiveSource /* ...
- 跨平台移动开发工具:PhoneGap与Titanium全方位比拼
PhoneGap和Appcelerator Titanium,对于封装和配置移动应用程序而言,二者都是非常受欢迎的开源JavaScript框架.本文为Appcelerator开发者Kevin Whin ...
- 全球首个全流程跨平台界面开发套件，PowerUI分析
一. 首个全流程跨平台界面开发套件,PowerUI正式发布 UIPower在DirectUI的基础上,自主研发全球首个全流程跨平台界面开发套件PowerUI(PUI)正式发布,PowerU ...
随机推荐
- 【转】Junit初体验
Junit是用来做测试的,无论是单元测试,还是接口测试,都可以通过调用Junit来验证被调用方法的正确性.当然,要验证一个方法的正确性,还可以采用main方法,通过输出每一个result,人为比对其正 ...
- Linux Linux程序练习一
注意:在Linux中,"*"是一个通配符,代表所有字符,所以"*"必须要使用转义字符"\"
- LeetCode递归 -2（Recursion） 培训专题 讲解文章翻译 （附链接） (2019-04-09 15:50)
递归 - 空间复杂度 在本文中, 我们将讨论如何分析递归算法的空间复杂度. 在计算递归算法的空间复杂度时,最需要考虑的两个部分就是: 递归相关空间 (recursion related space) ...
- 报错：org.apache.jasper.JasperException: /jsp/head.jsp (line: 1, column: 2) Page directive: illegal to
上面报错提示的是org.apache.jasper.JasperException: /jsp/head.jsp (line: 1, column: 2) Page directive: illega ...
- filter、map函数的区别
def even(num): if num%2==0: return True return False lis = [1,2,3,4,5,6,7,8,9] res = filter(even,lis ...
- socket listen/accept
listen函数 摘要:listen函数使用主动连接套接口变为被连接套接口,使得一个进程可以接受其它进程的请求,从而成为一个服务器进程.在TCP服务器编程中listen函数把进程变为一个服务器,并指定 ...
- std::condition_variable(3)复习
#include <iostream> // std::cout #include <thread> // std::thread #include <mutex> ...
- Uvalive6885(最短路)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=129723 题目大意:n个点,m条边,求出从0到n的最短距离,输出途 ...
- 【BZOJ2325】[ZJOI2011]道馆之战 线段树+树链剖分
[BZOJ2325][ZJOI2011]道馆之战 Description 口袋妖怪(又名神奇宝贝或宠物小精灵)红/蓝/绿宝石中的水系道馆需要经过三个冰地才能到达馆主的面前,冰地中的每一个冰块都只能经过 ...
- 第五课 nodejs 路由实现并处理请求作出响应
1创建一个http Server 文件server.js var http = require('http');var url = require('url');function start(rout ...