html5 FileReader+Canvas 前端压缩图片（IE9及以下浏览器不支持）

利用h5的FileReader属性读取图片文件，建立canvas画布，绘制图片

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<style>
	canvas{
		display: none;
	}
	#show:checked ~ canvas{
		display: block;
	}
</style>
<body>
<!--移动端可用;IE9及其以下浏览器不支持-->
<input type="file" accept="image/*" onchange="change(this)" /><!--accept属性,区分获取的文件类别-->
<input type="checkbox" id="show"/><label>显示画布？</label>
<canvas id="input_canvas"></canvas><!--画布-->
<!--<img src="" />--><!--测试-->
<script>
	function  change(self){
		var press	 =function() {//上传图片
				var Pic = document.getElementById('input_canvas').toDataURL("image/png"),
					pics = Pic.replace(/^data:image\/(png|jpg);base64,/, "");//pics是要上传的值，去掉了前缀
//					document.getElementsByTagName("img")[0].src=Pic;//测试部分
			}
		var getStyle =function(obj, attr) {//获取高度的兼容,
				if (obj.currentStyle) {
					return obj.currentStyle[attr];//IE
				} else {
					return getComputedStyle(obj, false)[attr];//chrome,firfox
				}
			}
		var Cnv = document.getElementById('input_canvas');
		var Cntx = Cnv.getContext('2d');//画布就绪
		var imgs = new Image();//新建图片对象
		var tmpFile = self.files[0]; 
		var reader = new FileReader();//用户读取手机上的文件  ie9及以下浏览器不支持filereader
			reader.readAsDataURL(tmpFile);//文件编码成Data URL
			reader.onload = function (e) {//文件读取完成时执行
				var url = e.target.result;//e.target.result读取文件编码
				imgs.src = url;
				imgs.onload = function () {
					var m = imgs.width / imgs.height,
					    n = parseFloat(getStyle(imgs, 'height'));//获取图片高度
						Cnv.height = 200; //该值影响缩放后图片的大小,此处设置图片高度为100px
						Cnv.width = 200 * m;//宽度跟随高度变化
						Cntx.drawImage(imgs, 0, 0, Cnv.width, Cnv.height);//画布绘制
					press();//调用function上传图片
				};
			};
	}
</script>
</body>
</html>

html5 FileReader+Canvas 前端压缩图片（IE9及以下浏览器不支持）

猜你喜欢