很早写的用HTML5 JQUERYMOBILE PHONEGAP来实现的手机照相
2013-03-19 13:07
435 查看
当时才学习HTML5然后看到HTML5开发手机应用的文章，到网站搜索了一下发现了PHONEGAP和JQUERYMOBILE的资料，便使用来开发了一个学习程序，HTML5开发手机效率确实高，但是要做好必须要非常的熟悉CSS，JAVASCRIPT才可以。
本程序可以调用手机照相机来照相，并记录下照相的位置，地点信息发布到列表中。
主界面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="./js/cordova-1.5.0.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="css/camera.css">
<script type="text/javascript" src="./js/camera.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" id="header">
<h1>HTML5相机</h1>
</div>
<div data-role="navbar" id="menu"><ul><li><a href="camera.html" data-inline="true" data-rel="dialog" data-transition="flip" data-icon="star">发布照片</a></li><li><a href="#" data-inline="true" data-rel="dialog" data-transition="flip" data-icon="gear">用户设置</a></li></ul></div>
<div data-role="content" id="content">
<div>
<a href="https://api.weibo.com/oauth2/authorize?client_id=1157250723&redirect_uri=file:///android_asset/www/index.html&display=mobile&response_type=code" data-role="button">AJAX</a>
</div>
<ul data-role="listview" id="photoList">
</ul>
</div>
</div>
</body>
</html>
照相机界面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="./js/cordova-1.5.0.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="css/camera.css">
<script type="text/javascript" src="./js/camera.js"></script>
</head>
<body>
<div data-role="dialog">
<div data-role="header" data-theme="d">
<h1>发布图片</h1>
<div data-role="navbar"><ul><li><a href="#" data-role="button" id="camera" data-theme="b">摄像头</a></li><li><a href="#" data-role="button" id="album" data-theme="b">相册</a></li></ul></div>
</div>
<div data-role="content" data-theme="c">
<div align="center">
<img src="" id="image" width="220" height="176"/>
</div>
<div data-role="fieldcontain">
<label for="textarea">说两句</label>
<textarea cols="40" rows="8" name="textarea" id="text"></textarea>
</div>
<div data-role="navbar"><ul><li><a href="#" data-role="button" id="publish" data-rel="back" data-theme="b">发布</a></li><li><a href="#" data-role="button" data-rel="back" data-theme="b">返回</a></li></ul></div>
</div>
</div>
</body>
</html>
JAVASCRIPT程序
var pictureSource; //图片来源
var destinationType;
var db = null;
function Photo(imagesrc, content, dateline, address, lat, lng) {
this.imagesrc = imagesrc;
this.content = content;
this.dateline = dateline;
this.address = address;
this.latitude = lat;
this.longitude = lng;
}
var lat = 0;
var lng = 0;
var addre = '';
var photo = null;
var isInit = false;
$(document).bind("pageinit", function() {
var isHide = false;
if(!isInit) {
document.addEventListener("deviceready",onDeviceReady,false);
}
$('#camera').bind('click', function() {
capturePhoto();
});
$('#album').bind('click', function() {
getPhoto();
});
$('#publish').bind('click', function() {
var imagesrc = $("#image").attr("src");
var content = $("#text").val();
var date = new Date();
if(addre == '') {
addre = "北京市天安门";
}
photo = new Photo(imagesrc, content, date.getTime(), addre, lat, lng);
db.transaction(insert, errorCB, successCB);
db.transaction(query, errorCB);
});
$('#ajax').bind('click', function() {
$.getJSON("", function(json){
alert(json);
});
});
$('#menu').hide();
$('#header').click(function() {
if(!isHide) {
$('#menu').hide();
isHide = true;
} else {
$('#menu').show();
isHide = false;
}
});
});
Date.prototype.format = function(format)
{
var o =
{
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format))
format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
// PhoneGap准备就绪，可以使用！
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 24 * 60 * 60 * 1000, enableHighAccuracy: true });
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
db = window.openDatabase("Database", "1.0", "camera data", 10000);
db.transaction(createDB, errorCB, successCB);
db.transaction(query, errorCB);
isInit = true;
}
function onSuccess(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'location': new google.maps.LatLng(lat, lng, true)}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addre = results[0].formatted_address;
} else {
addre = "未知地址";
}
alert(addre);
});
}
function onError(error) {
alert("位置定位失败，是否打开位置服务！");
}
function createDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS photo (id INTEGER PRIMARY KEY, imagesrc VARCHAR, contents VARCHAR, address, VARCHAR, lat INTEGER, lng INTEGER, dateline INTEGER)');
}
function insert(tx) {
tx.executeSql("INSERT INTO photo (imagesrc, contents, address, lat, lng, dateline) VALUES('"
+ photo.imagesrc + "','"
+ photo.content + "','"
+ photo.address + "','"
+ photo.latitude + "','"
+ photo.longitude + "','"
+ photo.dateline + "')");
}
function query(tx) {
tx.executeSql("SELECT * FROM photo ORDER BY dateline DESC", [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
var photoList = $('#photoList');
photoList.empty();
photoList.listview('refresh',true);
var result = '';
for(var i = 0; i < results.rows.length; i++) {
var date = new Date(results.rows.item(i).dateline);
result += "<li><img src=\"" + results.rows.item(i).imagesrc + "\" />"
+ "<p class=\"speech\">" + results.rows.item(i).contents + "</p>"
+ "<h3>" + date.format('yyyy-MM-dd hh:mm:ss') + "</h3>"
+ "<p class=\"local\">在" + results.rows.item(i).address + "拍摄</p></li>";
}
photoList.append($(result));
photoList.listview('refresh',true);
}
// 事务执行出错后调用的回调函数
function errorCB(tx, err) {
alert("db error");
}
// 事务执行成功后调用的回调函数
function successCB() {
}
// 当成功获得一张照片的Base64编码数据后被调用
function onPhotoDataSuccess(imageURI) {
// 取消注释以查看Base64编码的图像数据
// console.log(imageData);
// 获取图像句柄
var image = document.getElementById('image');
// 取消隐藏的图像元素
image.style.display = 'block';
// 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
image.src = imageURI;
}
// 当成功得到一张照片的URI后被调用
function onPhotoURISuccess(imageURI) {
// 取消注释以查看图片文件的URI
// console.log(imageURI);
// 获取图片句柄
var image = document.getElementById('image');
// 取消隐藏的图像元素
image.style.display = 'block';
// 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
image.src = imageURI;
}
// “Capture Photo”按钮点击事件触发函数
function capturePhoto() {
//设置数据源时要用文件不要使用BASE64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}
//“From Photo Library”/“From Photo Album”按钮点击事件触发函数
function getPhoto(source) {
// 从设定的来源处获取图像文件URI
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,sourceType: pictureSource.PHOTOLIBRARY });
}
// 当有错误发生时触发此函数
function onFail(mesage) {
alert('Failed because: ' + message);
}
本程序可以调用手机照相机来照相，并记录下照相的位置，地点信息发布到列表中。
主界面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="./js/cordova-1.5.0.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="css/camera.css">
<script type="text/javascript" src="./js/camera.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" id="header">
<h1>HTML5相机</h1>
</div>
<div data-role="navbar" id="menu"><ul><li><a href="camera.html" data-inline="true" data-rel="dialog" data-transition="flip" data-icon="star">发布照片</a></li><li><a href="#" data-inline="true" data-rel="dialog" data-transition="flip" data-icon="gear">用户设置</a></li></ul></div>
<div data-role="content" id="content">
<div>
<a href="https://api.weibo.com/oauth2/authorize?client_id=1157250723&redirect_uri=file:///android_asset/www/index.html&display=mobile&response_type=code" data-role="button">AJAX</a>
</div>
<ul data-role="listview" id="photoList">
</ul>
</div>
</div>
</body>
</html>
照相机界面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="./js/cordova-1.5.0.js"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="css/camera.css">
<script type="text/javascript" src="./js/camera.js"></script>
</head>
<body>
<div data-role="dialog">
<div data-role="header" data-theme="d">
<h1>发布图片</h1>
<div data-role="navbar"><ul><li><a href="#" data-role="button" id="camera" data-theme="b">摄像头</a></li><li><a href="#" data-role="button" id="album" data-theme="b">相册</a></li></ul></div>
</div>
<div data-role="content" data-theme="c">
<div align="center">
<img src="" id="image" width="220" height="176"/>
</div>
<div data-role="fieldcontain">
<label for="textarea">说两句</label>
<textarea cols="40" rows="8" name="textarea" id="text"></textarea>
</div>
<div data-role="navbar"><ul><li><a href="#" data-role="button" id="publish" data-rel="back" data-theme="b">发布</a></li><li><a href="#" data-role="button" data-rel="back" data-theme="b">返回</a></li></ul></div>
</div>
</div>
</body>
</html>
JAVASCRIPT程序
var pictureSource; //图片来源
var destinationType;
var db = null;
function Photo(imagesrc, content, dateline, address, lat, lng) {
this.imagesrc = imagesrc;
this.content = content;
this.dateline = dateline;
this.address = address;
this.latitude = lat;
this.longitude = lng;
}
var lat = 0;
var lng = 0;
var addre = '';
var photo = null;
var isInit = false;
$(document).bind("pageinit", function() {
var isHide = false;
if(!isInit) {
document.addEventListener("deviceready",onDeviceReady,false);
}
$('#camera').bind('click', function() {
capturePhoto();
});
$('#album').bind('click', function() {
getPhoto();
});
$('#publish').bind('click', function() {
var imagesrc = $("#image").attr("src");
var content = $("#text").val();
var date = new Date();
if(addre == '') {
addre = "北京市天安门";
}
photo = new Photo(imagesrc, content, date.getTime(), addre, lat, lng);
db.transaction(insert, errorCB, successCB);
db.transaction(query, errorCB);
});
$('#ajax').bind('click', function() {
$.getJSON("", function(json){
alert(json);
});
});
$('#menu').hide();
$('#header').click(function() {
if(!isHide) {
$('#menu').hide();
isHide = true;
} else {
$('#menu').show();
isHide = false;
}
});
});
Date.prototype.format = function(format)
{
var o =
{
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format))
format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
return format;
}
// PhoneGap准备就绪，可以使用！
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 24 * 60 * 60 * 1000, enableHighAccuracy: true });
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
db = window.openDatabase("Database", "1.0", "camera data", 10000);
db.transaction(createDB, errorCB, successCB);
db.transaction(query, errorCB);
isInit = true;
}
function onSuccess(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'location': new google.maps.LatLng(lat, lng, true)}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addre = results[0].formatted_address;
} else {
addre = "未知地址";
}
alert(addre);
});
}
function onError(error) {
alert("位置定位失败，是否打开位置服务！");
}
function createDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS photo (id INTEGER PRIMARY KEY, imagesrc VARCHAR, contents VARCHAR, address, VARCHAR, lat INTEGER, lng INTEGER, dateline INTEGER)');
}
function insert(tx) {
tx.executeSql("INSERT INTO photo (imagesrc, contents, address, lat, lng, dateline) VALUES('"
+ photo.imagesrc + "','"
+ photo.content + "','"
+ photo.address + "','"
+ photo.latitude + "','"
+ photo.longitude + "','"
+ photo.dateline + "')");
}
function query(tx) {
tx.executeSql("SELECT * FROM photo ORDER BY dateline DESC", [], querySuccess, errorCB);
}
function querySuccess(tx, results) {
var photoList = $('#photoList');
photoList.empty();
photoList.listview('refresh',true);
var result = '';
for(var i = 0; i < results.rows.length; i++) {
var date = new Date(results.rows.item(i).dateline);
result += "<li><img src=\"" + results.rows.item(i).imagesrc + "\" />"
+ "<p class=\"speech\">" + results.rows.item(i).contents + "</p>"
+ "<h3>" + date.format('yyyy-MM-dd hh:mm:ss') + "</h3>"
+ "<p class=\"local\">在" + results.rows.item(i).address + "拍摄</p></li>";
}
photoList.append($(result));
photoList.listview('refresh',true);
}
// 事务执行出错后调用的回调函数
function errorCB(tx, err) {
alert("db error");
}
// 事务执行成功后调用的回调函数
function successCB() {
}
// 当成功获得一张照片的Base64编码数据后被调用
function onPhotoDataSuccess(imageURI) {
// 取消注释以查看Base64编码的图像数据
// console.log(imageData);
// 获取图像句柄
var image = document.getElementById('image');
// 取消隐藏的图像元素
image.style.display = 'block';
// 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
image.src = imageURI;
}
// 当成功得到一张照片的URI后被调用
function onPhotoURISuccess(imageURI) {
// 取消注释以查看图片文件的URI
// console.log(imageURI);
// 获取图片句柄
var image = document.getElementById('image');
// 取消隐藏的图像元素
image.style.display = 'block';
// 显示拍摄的照片
// 使用内嵌CSS规则来缩放图片
image.src = imageURI;
}
// “Capture Photo”按钮点击事件触发函数
function capturePhoto() {
//设置数据源时要用文件不要使用BASE64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}
//“From Photo Library”/“From Photo Album”按钮点击事件触发函数
function getPhoto(source) {
// 从设定的来源处获取图像文件URI
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,sourceType: pictureSource.PHOTOLIBRARY });
}
// 当有错误发生时触发此函数
function onFail(mesage) {
alert('Failed because: ' + message);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery mobile + html5 手机app表单跨域提交实例（手机app开发html5 juqery moblie phonegap系列一）
- jQuery+HTML5实现手机摇一摇换衣特效
- 【技术直通车】旅游日记——基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现
- 基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现
- phonegap+emberjs+python手机店发展，html5实现本地车类别~
- Html5 + jquery mobile + mobiscroll ，REST手机客户端
- 手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
- jQuery+HTML5实现手机摇一摇换衣特效
- phonegap+emberjs+python开发手机商城，html5实现本地购物车类~
- html5通过jquery实现跨域请求
- [PHP]移动端网页如何使用JqueryMobile+PHP实现上传图片的功能
- JS+HTML5手机开发之滚动和惯性缓动实现方法分析
- phonegap + jquery mobile切换页面的几种方法
- 『HTML5制作仿JQuery效果』减速&加速滑动的实现
- HTML5 实现手机拍照上传
- 解决关于jquery mobile databox日期插件手机上失效的问题
- jquery.mobile手机网页简要
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- jQuery实现HTML5 placeholder效果实例
- html5 jqueryrotate插件实现旋转动画