요즘 이미지 해상도가 매우 높아져서 이미지사이즈가 매우 크다. 파일업로드를 수행하는 서버에서는 네트워크 트래픽에 부하가 많이 발생하므로 이를 줄이는 방법 중 하나는 클라이언트에서 사이즈를 줄이는 방법이 있다.
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> <br> </div>
대략적으로 쓴내용이라 필자는 테스트 해보지 못함. 참고로 사용하길 바람
'JQUERY／JAVASCRIPT' 카테고리의 다른 글
| History API 주소를 내 마음대로 (0) | 2018.01.03 |
|---|---|
| window.history 제어 및 뒤로가기 막기 (0) | 2018.01.03 |
