【圖片壓縮】使用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的流轉換爲原來正常的圖片流，而後再進行其它操做

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。