클라이언트에서 image resize 하기

요즘 이미지 해상도가 매우 높아져서 이미지사이즈가 매우 크다. 파일업로드를 수행하는 서버에서는 네트워크 트래픽에 부하가 많이 발생하므로 이를 줄이는 방법 중 하나는 클라이언트에서 사이즈를 줄이는 방법이 있다.

HTML5 canvas로 이미지를 받을 경우 javascript에서 처리하는 방법이다.

1. 공통.js 나 해당 javascript 안에 선언

(function () {
	    var matched, browser;
	 
	    // Use of jQuery.browser is frowned upon.
	    // More details: http://api.jquery.com/jQuery.browser
	    // jQuery.uaMatch maintained for back-compat
	    jQuery.uaMatch = function (ua) {
	        ua = ua.toLowerCase();
	 
	        var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
	            /(webkit)[ \/]([\w.]+)/.exec(ua) ||
	            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
	            /(msie) ([\w.]+)/.exec(ua) ||
	            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
	            [];
	 
	        return {
	            browser: match[1] || "",
	            version: match[2] || "0"
	        };
	    };
	 
	    matched = jQuery.uaMatch(navigator.userAgent);
	    browser = {};
	 
	    if (matched.browser) {
	        browser[matched.browser] = true;
	        browser.version = matched.version;
	    }
	 
	    // Chrome is Webkit, but Webkit is also Safari.
	    if (browser.chrome) {
	        browser.webkit = true;
	    } else if (browser.webkit) {
	        browser.safari = true;
	    }
	 
	    jQuery.browser = browser;
	})();


	// html5의 Canvas를 사용해서 이미지 리사이징이 가능한지 판별하는 메소드
	function isImageResizable() {
	    var isCanvasUsable = !!document.createElement('canvas').getContext;
	    var isLowerIE = false;
	 
	    if($.browser.msie) {
	        if($.browser.version < 10) {    // IE9은 Canvas는 쓸 수 있지만 file input에서 file Object를 가져오지 못해 제외
	            isLowerIE = true;
	        }
	    }
	 
	    return isCanvasUsable && !isLowerIE;
	}

2. 해당 imageUpload.jsp

function openCamera(id) {
		var inputId = '#' + id;
		$(inputId).click();		
	}

$('#test1').change(function(e){
	   $('#img_test1').attr('src', URL.createObjectURL(e.target.files[0]));
	   resizingImage('test1', e);
});



// fileInput Object에 값이 변경될 때
	function resizingImage(fileId, e){
		// 이미지 리사이즈가 브라우저단에서 가능하다면 html5 사용...
	    if(isImageResizable()) {
	        var file = e.target.files[0]; // file Object get...
	        if(file.type.match(/image.*/)) {
	            // Load the image
	            var reader = new FileReader();
	            reader.onload = function (readerEvent) {
	                var image = new Image();
	                image.onload = function (imageEvent) {
	 
	                    // Resize the image
	                    var canvas = document.createElement('canvas'),
	                    max_size = 1280,
	                    width = image.width,
	                    height = image.height;
	 
	                    if (width > height) {
	                        if (width > max_size) {
	                            height *= max_size / width;
	                            width = max_size;
	                        }
	                    } else {
	                        if (height > max_size) {
	                            width *= max_size / height;
	                            height = max_size;
	                        }
	                    }
	                    canvas.width = width;
	                    canvas.height = height;
	                    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
	                    var dataUrl = canvas.toDataURL('image/jpeg');
	                    //var dataUrl = canvas.toDataURL('image/jpeg', 0.90);   // 이미지 퀄리티 조절도 가능...
	                    //var resizedImage = dataURLToBlob(dataUrl);  // 이미지를 바이너리 형태로 변환?
	                     
		                // 이미지가 리사이즈 되었으면 파일 업로드하는 메소드 호출 시작
		                        //변환된 사진 attribute 변경
					$("#img_"+fileId).attr('src', dataUrl);
					uploadFile(fileId);
   // 이미지가 리사이즈 되었으면 파일 업로드하는 메소드 호출 끝
	                    return false;
	                }
	                image.src = readerEvent.target.result;
	            }
	            reader.readAsDataURL(file);
	        }
	    }
	    return false;
	}

...................
...................
...................


<input type="file" accept="image/*" style="display: none;" id="test1" name="test1" capture>
<button id="attach_test1" type="button" class="btn_type2 attach_yn" onClick="javascript:openCamera('test1');">
<div class="btn_wrap" id="imgDiv_test1" style="display: none;">
    <span class="txt" align="center"><img id="img_test1" style="width: 97%;" /></span> &nbsp;<br>
</div>

대략적으로 쓴내용이라 필자는 테스트 해보지 못함. 참고로 사용하길 바람