拍照预览图片

html：

<img id="pre" src="">    
<input id="takepicture" type="file" accept="image/*" capture="camera" style="">

JavaScript：

var takePicture = document.getElementById('takepicture');      
var pre = document.getElementById("pre");    
var takePictureUrl = function () {    
	takePicture.onchange = function (event) {    
		var files = event.target.files, file;    
		if (files && files.length > 0) {    
			file = files[0];    
			try {    
				var URL = window.URL || window.webkitURL;    
				var blob = URL.createObjectURL(file);　　// 获取照片的文件流    
				pre.src=blob;    
			}    
			catch (e) {    
				try {    
					var fileReader = new FileReader();    
					fileReader.onload = function (event) {　　　　// 获取照片的base64编码    
					pre.src=event.target.result;    
					};    
					fileReader.readAsDataURL(file);    
				}    
				catch (e) {    
					alert('拍照失败,请联系客服或尝试更换手机再试!');    
				}    
			}    
		}    
	}    
}();

参考：

http://blog.csdn.net/fengye12zjs/article/details/53504274

https://www.cnblogs.com/qiye2016/p/5955908.html