고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
사용자로부터 이미지/ 사진을 업로드 받아서 처리해야 할 때, 이미지/ 사진의 크기가 너무 큰 경우 화면에 전부 뿌려주기도 불편하거니와 서버에 업로드 할 경우 용량때문에 서버에 부하를 주게됩니다.
이미지 실제크기를 변경하는 방법이 있습니다
아래 이미지는 6455x2709px 의 아주 큰 이미지 입니다. 이런 이미지를 업로드 할 경우, 원하는 크기로 사이즈를 조정한 다음에 화면에 표시하거나 서버에 업로드 할 수 있습니다.
물론, 이미지 크기를 변경하는 방법은 여러가지가 있을 수 있겠지만, 이번에 알아볼 사항은 HTML5에서 제공하는 canvas 를 이용하여 이미지크기/사진크기를 변경하는 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<script language = "javascript">
function ResizeImage() {
var filesToUpload = document.getElementById('imageFile').files;
var file = filesToUpload[0];
// 문서내에 img 객체를 생성합니다
var img = document.createElement("img");
// 파일을 읽을 수 있는 File Reader 를 생성합니다
var reader = new FileReader();
// 파일이 읽혀지면 아래 함수가 실행됩니다
reader.onload = function(e) {
img.src = e.target.result;
// HTML5 canvas 객체를 생성합니다
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// 캔버스에 업로드된 이미지를 그려줍니다
ctx.drawImage(img, 0, 0);
// 최대폭을 400 으로 정했다고 가정했을때
// 최대폭을 넘어가는 경우 canvas 크기를 변경해 줍니다.
var MAX_WIDTH = 400;
var MAX_HEIGHT = 400;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
// canvas에 변경된 크기의 이미지를 다시 그려줍니다.
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
// canvas 에 있는 이미지를 img 태그로 넣어줍니다
var dataurl = canvas.toDataURL("image/png");
document.getElementById('output').src = dataurl;
}
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<div style="margin-top:50px">
<input id="imageFile" type="file">
</div>
<div style="margin-top:50px">
<input type="button" value="Resize Image" onclick="ResizeImage()"/>
</div>
<div style="margin-top:50px">
<img src="" id="output">
</div>
</body>
</html>
|
cs |
위 코드를 실행시키면 아래와 같이 보여지게 됩니다. 찾아보기를 눌러 앞서 말씀드렸던 6455x2709px 크기의 이미지를 업로드 한 후에 Resize Image 버튼을 클릭하면
다음과 같이 400px 이하로 조정되어 화면에 뿌려지게 됩니다. 이때, 이미지 크기를 50% 또는 40% 등으로 줄여서 보여주는게 아니라 HTML5 Canvas 객체를 이용하여 다시 그려주기 때문에, 뿌려지는 이미지를 우클릭하여 다운로드 받아보면 실제 이미지 크기가 변경된 것을 확인할 수 있습니다.
이상 HTML5 Canvas 를 이용한 javascript 이미지크기조정/ 사진크기변경 이었습니다
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| 팝업창 닫힐때 이벤트 잡기 / PopUp Window Event (0) | 2020.07.18 |
|---|---|
| 이미지변경시 input file 은 감추고, 이미지 클릭시 파일선택 창 바로 띄우기 / javascript (0) | 2020.07.08 |
| 특수키차단, 복사금지, 컨트롤키방지, Alt키 차단하기 (0) | 2019.08.16 |
| 팝업창 자동 닫기, 다른 창 이동시 자동닫기, 팝업창에서 다른 브라우저나 창으로 이동금지 (2) | 2019.08.14 |
| javascript 순서대로 실행시키기, jquery 효과, 애니메이션 실행순서 차례로.... Callback 함수 (0) | 2019.08.05 |
댓글 영역