【ピクチャ圧縮】canvas,html 5を用いたピクチャ圧縮

まず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.html 5のfilereaderでファイルストリームを読み出し、imageに流す
3、イメージの幅が要求に合っているかどうかを判断し(ここでは実際の状況によって変更可能)、画像が大きすぎて圧縮を行う(iphone 5システムのcanvasにはシステムレベルのバグがあるためiosのここでは簡単に圧縮処理を行わず、その後互換性の研究を行う時間がある)
4、canvasを作成し、画像をcanvasに描き、圧縮する
5、圧縮されたピクチャ(または圧縮されていないピクチャ)のストリームを読み出し、このときのピクチャストリームはbase 64を通過するべきであり、imgのsrcラベルに前にbase 64部分と宣言されたヘッダを取り除く
6、base 64のファイルをphp端に流す
php端の処理

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

php側はbase 64のストリームを元の正常なピクチャストリームに変換してから他の操作を行う必要がある