跨平台移动开发_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 ...
随机推荐
- 如何查询当前手机的cpu架构，so库导入工程又出异常了？
执行adb命令: adb shell cat /proc/cpuinfo 对应文件夹 AArch64 == arm64-v8a ARMv7 == armeabi-v7a ............等 其 ...
- Android 缓存详解目录
1.http://www.cnblogs.com/lzrabbit/p/3734850.html 2.
- MPEG 编解码相关资料收集
以下是我搜集的关于MPEG1/2的编解码相关的资料: (注:mpge帧内编码是基于jpeg编码的,所以请务必先理解jpeg的编解码原理.) 1:Introduction to MPEG 2 Video ...
- Python Socket套接字
socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...
- <jsp:include page="xxxx"/> <@page include="xxxx"@>
<jsp:include page="/inc/all/header.html" flush="true"/> 动态导入页面 1. 基本上没遇到 ...
- 《从零开始学Swift》学习笔记（Day 40）——析构函数
原创文章,欢迎转载.转载请注明:关东升的博客 与构造过程相反,实例最后释放的时候,需要清除一些资源,这个过程就是析构过程.在析构过程中也会调用一种特殊的方法deinit,称为析构函数.析构函数dein ...
- 《从零开始学Swift》学习笔记（Day 8）——小小常量、变量大作用
原创文章,欢迎转载.转载请注明:关东升的博客 计算机语言学习中都有常量和变量,他们几乎是我编写代码的灵魂了,离开他们我真的是“活不了” 常量是标识符的前面加上关键字let.常量其值在使用过程中不会 ...
- 关于webpack打包js和css
废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...
- an open source web server and reverse proxy
https://www.nginx.com/resources/admin-guide/ NGINX is an open source web server and reverse proxy th ...
- Nuxt使用scss
Nuxt中使用scss也很简单,分简单的几步就OK 一.安装scss依赖 用IDE打开项目,在Terminal里通过 npm i node-sass sass-loader scss-loader - ...