HTML5 javascript 에서 Image 썸네일 만들기

 

HTML 5

 

javascript 에서 업로드한 file 을 썸네일로 만들어 보겠습니다.

 

모바일 작업을 하는 중에 스마트폰에서 업로드 하는 이미지는 용량이 꽤 크기 때문에 웹 메모리상에 부하가 너무 심해서 썸네일로 줄여볼 방법이 없을까 하다가 찾게 되었습니다.

 

 

FileReader 객체를 사용합니다.

지원 범위는 다음과 같습니다.

 

출처 : http://caniuse.com/#feat=filereader

 

 

Jquery Import는 기본입니다.

 

먼저 파일 태그와 썸네일을 배치할 div 태그를 만듭니다.

            <input type="file" id="IMG_FILE" >
            <div id="PREVIEW_IMG_DIV" align="center">
            </div>

 

다음으로 Img File을 업로드한 후 작업 소스입니다. (javascript)

$('#IMG_FILE').change(function(e){
   var reader = new FileReader();
   reader.readAsDataURL(e.target.files[0]);
 
   reader.onload = function  () {
       var tempImage = new Image();
       tempImage.src = reader.result;
       tempImage.onload = function () {
            var canvas = document.createElement('canvas');
            var canvasContext = canvas.getContext("2d");
 
            canvas.width = 100; 
            canvas.height = 100;
 
            canvasContext.drawImage(this, 0, 0, 100, 100);
 
            var dataURI = canvas.toDataURL("image/jpeg");
 
            var imgTag = "<img id='PREVIEW_IMG' style='width: 35%;' src='"+dataURI+"'/>";
            $("#PREVIEW_IMG_DIV").append(imgTag);
        };
    };
});
          

1# : Img 파일의 Change 될 때 작업을 시작합니다.

2# : FileReader 객체를 생성합니다.

4# : file object 객체를 읽어 들입니다.

5# : FileReader 객체를 로드합니다.

6# : Image 객체를 생성합니다.

7# : data-uri를 생성한 Image 객체에 넣습니다.

8# : Image 객체를 로드합니다.

9# : canvas 엘리먼트를 생성합니다.

12#, 13# : 생성한 canvas 사이즈를 설정합니다.

15# : 이미지를 canvas에 그려줍니다.

17# : canvas를 data-uri 형태로 변환합니다.

19# : 변환댄 data-uri를 img 태그에 넣습니다.

20# : 생성된 imgTag 를 div 태그에 넣습니다.