【图片压缩】使用canvas，html5进行图片压缩分类：canvas图片压缩压缩HTML5fileReader2015032017:14118人阅读评论(0)收藏

首先html中有个input file的按钮，能选择图片上传

<input type="file" accept="image/*" onChange="fileInfo(this)" />

javascript部分

var isiOS = navigator.userAgent.match(\'iPad\') || navigator.userAgent.match(\'iPhone\') || navigator.userAgent.match(\'iPod\');

function uploadImg(content){
	//1.创建XMLHTTPRequest对象
	var xmlhttp;

	if (window.XMLHttpRequest) {
		//IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest;
		
		//针对某些特定版本的mozillar浏览器的bug进行修正
		if (xmlhttp.overrideMimeType) {
			xmlhttp.overrideMimeType(\'text/xml\');
		};
	} else if (window.ActiveXObject){
		//IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	};
	
	if(xmlhttp.upload){
		//2.回调函数
		xmlhttp.onreadystatechange = function(e){
			if(xmlhttp.readyState==4){
				$(\'#J_loading\').hide();
				if(xmlhttp.status==200){
					var json = eval(\'(\' + xmlhttp.responseText + \')\');
					if(json.code == 1){
						alert(\'success\');
					}else{
						alert(\'failed\');
					}						
				}else{
					alert(\'failed\');
				}
			}
		};
		
		//3.设置连接信息
		xmlhttp.open("POST","upload.php",true);
		
		//4.发送数据，开始和服务器进行交互
		var formdata = new FormData();
		formdata.append("file_content", content);
		xmlhttp.send(formdata);
	}
}

function fileInfo(source){	
	var ireg = /image\/.*/i;
	var file = source.files[0];
	var file_name = file.name;
	var file_type = file.type;
	
	
	if(!file_type.match(ireg)) {
		alert(\'不是图片，请重新选择\');
	}else{
		var img64 = new Image();
		if(window.FileReader) {  
			var fr = new FileReader();  
			fr.onloadend = function(e) {
				img64.src = e.target.result;
				img64.onload = function(){ //图片加载完之后（需要获取宽度，确定是否要压缩）
					var img64_w = img64.width;
					var img64_h = img64.height;
					var temp_imgData;
					if(isiOS){ //iphone5 canvas会变形，所以所有ios的都不压缩（之后有时间再处理）
						temp_imgData = e.target.result;
					}else{
						if(img64_w > 600){ //压缩
							var canvas = document.createElement(\'canvas\');
							var canvas_w = canvas.width = 660;
							var canvas_h = canvas.height = Math.round( 600 * img64_h / img64_w );
													
							canvas.getContext(\'2d\').drawImage( img64, 0, 0, canvas_w, canvas_h );
							
							temp_imgData = canvas.toDataURL("image/png"); 
						}else{
							temp_imgData = e.target.result;
						}
					}
					temp_imgData = temp_imgData.split(",")[1];
					uploadImg(temp_imgData);
				}
			};  
			fr.readAsDataURL(file);  
		}
	}
};

1、通过input file上传的图片，先检查是否为图片

2、通过html5的filereader将文件流读取出来，并将文件流放在一个image中

3、判断image的宽是否符合要求（这里根据实际情况可以改变），图片过大的进行压缩（由于iphone5系统的canvas存在系统级bug，所以对于ios的这里简单的不做压缩处理，之后有时间进行兼容性研究）

4、创建canvas，将图片画到canvas上，进行压缩

5、将压缩的图片（或者未压缩的图片）流读取出来，这时候的图片流应该是base64过的，去掉放在img的src标签中前面声明是base64部分的头

6、然后将base64过的文件流传给php端

php端的处理

$base64_content = $_POST[\'file_content\'];
$real_content = base64_decode($base64_content);

php端需要把base64的流转换为原来正常的图片流，然后再进行其它操作

版权声明：本文为博主原创文章，未经博主允许不得转载。

原文链接：https://www.cnblogs.com/snow-finland/p/4690160.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。