HTML5 javascript 에서 Image 썸네일 만들기
2016. 4. 15. 13:45ㆍlanguage/html
HTML 5
javascript 에서 업로드한 file 을 썸네일로 만들어 보겠습니다.
모바일 작업을 하는 중에 스마트폰에서 업로드 하는 이미지는 용량이 꽤 크기 때문에 웹 메모리상에 부하가 너무 심해서 썸네일로 줄여볼 방법이 없을까 하다가 찾게 되었습니다.
FileReader 객체를 사용합니다.
지원 범위는 다음과 같습니다.
출처 : http://caniuse.com/#feat=filereader
Jquery Import는 기본입니다.
먼저 파일 태그와 썸네일을 배치할 div 태그를 만듭니다.
1
2
3 |
<input type="file" id="IMG_FILE" >
<div id="PREVIEW_IMG_DIV" align="center">
</div> |
cs |
다음으로 Img File을 업로드한 후 작업 소스입니다. (javascript)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
$('#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);
};
};
});
|
cs |
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 태그에 넣습니다.
'language > html' 카테고리의 다른 글
html5 | input type number maxlength 설정 ( 모바일 ) / oninput, max, min (8) | 2016.08.11 |
---|---|
[HTML 기초 강좌] 11. CSS ( 스타일시트 ) 적용하기 (2) | 2016.01.18 |
[HTML 기초 강좌] 10. img map 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 9. Table 태그 (0) | 2016.01.18 |
[HTML 기초 강좌] 8. iframe과 target (8) | 2016.01.18 |
[HTML 기초 강좌] 7. 링크연결 (2) | 2016.01.18 |
[HTML 기초 강좌] 6. img 태그 (8) | 2016.01.18 |
[HTML 기초 강좌] 5. 목록을 나타내는 ul 태그, ol 태그, dl 태그, li 태그 (10) | 2016.01.18 |
[HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 ) (8) | 2016.01.18 |
[HTML 기초 강좌] 3.문자 형태 태그와 문장 형식 태그 (0) | 2016.01.18 |