很早写的用HTML5 JQUERYMOBILE PHONEGAP来实现的手机照相

最新推荐文章于 2019-03-15 13:44:48 发布

70岁了也要敲代码

最新推荐文章于 2019-03-15 13:44:48 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/reaganjava/article/details/8691196

版权

当时才学习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);
}