【图片压缩】使用canvas，html5进行图片压缩 分类： canvas 图片压缩 压缩 HTML5 fileReader 2015-03-20 17:14 118人阅读 评论(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);  
		}
	}
};

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

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

三、判断image的宽是否符合要求（这里根据实际状况能够改变），图片过大的进行压缩（因为iphone5系统的canvas存在系统级bug，因此对于ios的这里简单的不作压缩处理，以后有时间进行兼容性研究）

四、建立canvas，将图片画到canvas上，进行压缩

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

六、而后将base64过的文件流传给php端

php端的处理

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

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

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