h5调用相机、相册、摄像头拍照、录像并压缩预览

1、使用h5中的input标签 

<!--相机-->
<input id="fileBtn" type="file" onchange="upload('#fileBtn');" accept="image/*" capture='camera' style="opacity: 0;width:0;/>拍照

<!--摄像头录像-->
<input id="video" type="file"  accept="video/*" capture='camera' style="opacity: 0;width:0;"/>录像

<!--调用相册-->
<input id="ph" type="file" onchange="upload('#ph');" accept="image/*" style="opacity: 0;width:0;"/>从相册选择


<!--图片预览，用于存放相机拍照或者相册获取的图片-->
<div class="photo">
    <img src="" id="img1"/>
    <img src="" id="img2"/>
    <img src="" id="img3"/>			
</div>


<!--存放视频base64编码-->
<input  type="hidden"  id="vid" value=""><!--存放视频base64编码，用于传给后台上传保存-->

 (1)、拍照 、获取相册图片并预览js

function upload(c){
	var $c = document.querySelector(c),
		file = $c.files[0],	 
		reader = new FileReader();
		//reader.readAsDataURL(file);
		// 缩放图片需要的canvas
		var canvas = document.createElement('canvas');
		var context = canvas.getContext('2d');
		img = new Image();
		img.onload = function() {
			// 图片原始尺寸
			var originWidth = this.width;
			var originHeight = this.height;
			// 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
			var maxWidth = 60,
				maxHeight = 60;
			// 目标尺寸
			var targetWidth = originWidth,
				targetHeight = originHeight;
			if(originWidth > maxWidth || originHeight > maxHeight) {
				if(originWidth / originHeight > maxWidth / maxHeight) {
					// 更宽，按照宽度限定尺寸
					targetWidth = maxWidth;
					targetHeight = Math.round(maxWidth * (originHeight / originWidth));
				} else {
					targetHeight = maxHeight;
					targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				}
			}
			// canvas对图片进行缩放
			canvas.width = targetWidth;
			canvas.height = targetHeight;
			// 清除画布
			context.clearRect(0, 0, targetWidth, targetHeight);
			// 图片压缩
			context.drawImage(img, 0, 0, targetWidth, targetHeight);
			/*第一个参数是创建的img对象；第二个参数是左上角坐标，后面两个是画布区域宽高*/
			//压缩后的图片base64 url
			/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/jpeg';
			 * qualityArgument表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92*/
			var newUrl = canvas.toDataURL('image/jpeg', 0.1);//base64 格式,图片质量
			var img1 = $("#img1").attr("src");
			var img2 = $("#img2").attr("src");
			var img3 = $("#img3").attr("src");
			if(img1 =="" || img1 == undefined){	
				$("#img1").attr("src",newUrl);
			}else if(img2 ==""){
				$("#img2").attr("src",newUrl);
			} else if(img3 ==""){
				$("#img3").attr("src",newUrl);
			}
　　　　　　　
		};
	reader.onload = function(e) {
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);
}

 (1)、调用摄像头录像并预览js

<!--录像-->
//视频上传
$("#video").change(function(){	
	$("#video0").remove();//每次调用的时候先删除上一次创建的video标签
	$("#vid").val("");   //清空存放base64编码的标签（用于请求后台上传保存）
	console.log(this.files[0].size);
	var fileSize =(this.files[0].size) / (1024*1024);//转换成M
	fileSize = fileSize.toFixed(1);//保留小数点后一位
	console.log(fileSize);
	if(fileSize > 30){
	 	alert('上传视频不能大于30M');	
	 }else{ 		
		var vde = '<video style="height:80px; width:78px;" id="video0"  autoplay="autoplay" x5-playsinline="" playsinline="" webkit-playsinline=""></video>';					
	 	$(".photo").append(vde);//将创建的video标签插入div(根据自己代码选择要插入的div)			
		var file = this.files[0];  
		var reader = new FileReader();  			
		reader.onload = function(e) {  
		    $("#video0").attr("src", this.result);//将转换后的编码存入src完成预览  				 
		    var img=this.result;
		    var imgNum = img.split(";base64,");
		    var imgBase=imgNum[1];	
		    $("#vid").val(imgBase);//将转换后的编码保存到input供后台使用（请求后台上传保存） 
	        };
	    reader.readAsDataURL(file);//调用自带方法进行转换  
	 }							
}) ;