基于JS的拍照选图、相册选图

用JS实现调出摄像头拍照或从手机相册选择图片，然后返回移动终端，此处以Android为例（Eclipse工程），ios上也是一样的，其原理不依赖于移动终端原生API，而依赖于来自PhoneGap的JS端能力库cordova-2.2.0.js, cordova是基于nodejs环境下的Device API，文件比较大。目前， Visual Studio 2015 已加入了基于C#的Android仿真器，集成了Apache cordova。

html页面代码：

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/cordova-2.2.0.js"></script>
<script type="text/javascript">
$(document).bind('deviceready',function(){

	$('#btnCamera').bind('touchstart',function(){
		navigator.camera.getPicture(function(data){
			$('#thePicture').attr('src','data:image/jpeg;base64,'+data);
		},function(error){
			console.log('Error');
		},{
		destinationType:Camera.DestinationType.DATA_URL,
		sourceType:Camera.PictureSourceType.CAMERA,
		allowEdit:false,
		targetWidth:135,
		targetHeight:200
		});
	});	
	
	$('#btnPicture').bind('touchstart',function(){
		navigator.camera.getPicture(function(data){
			$('#thePicture').attr('src','data:image/jpeg;base64,'+data);
		},function(error){
			console.log('Error');
		},{
		destinationType:Camera.DestinationType.DATA_URL,
		sourceType:Camera.PictureSourceType.PHOTOLIBRARY,
		allowEdit:false,
		targetWidth:135,
		targetHeight:200,
		mediaType:Camera.MediaType.PICTURE
		});
	});

});
</script>
<input type="button" id="btnCamera" value="picture from camera" /><br/>
<input type="button" id="btnPicture" value="picture from library" /><br/>
<img id="thePicture" src="" />

效果图如下：

附上Demo下载地址：基于JS的拍照选图、相册选图（以Android为例，Eclipse项目）

作为辛苦劳动成果，设置了2分滴下载小费，没分的筒鞋想办法获取积分，好的社区需要大家一同建设，杜绝伸手党

在IOS 内的WebView未测试，估计也是没问题滴，如果你有更好的方法或其它问题可以留言，大家共同探讨，共同学习。