새소식
반응형
Programming language/Javascript,jQuery
[Javascript]이미지 크기 구하기
- -
반응형
자바스크립트로 이미지의 크기를 구하는 법은 어렵지 않다.
예전에 회원 이미지를 리사이징할 때 사용했던 방법인데 먼저 프리뷰 이미지를 하나 만든다.(id="preview")
그리고 파일을 첨부하는 input 태그에서 onchange 이벤트를 건다. 그리고 이벤트 실행 함수로 파일의 값을 태워보낸다.
아래 코드를 보자.
frm.preview.src = ""; 를 해준 이유는 onchange 이벤트가 발생했을 때 기존에 있는 이미지의 속성을 초기화시켜주기 위함이다.
|
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
|
<%@page language="java" contentType="text/html; charset=euc-kr"%>
<html>
<head>
<title>이미지 구하기</title>
<script>
function imgCheck(img)
{
alert(img);
frm.preview.src = "";
frm.preview.src = img;
var preview = document.getElementById('preview');
var width = preview.clientWidth;
var height = preview.clientHeight;
alert("width : " + width + " | height : " + height);
}
</script>
</head>
<body>
<form id="frm">
<div>TISTORY</div>
<img src="" border="0" name="preview" id="preview" ><br>
<input type="file" name="IMG_FILE" id="IMG_FILE" onchange="imgCheck(this.value)" >
</form>
</body>
</html>
|
cs |
파일을 선택했을 때 파일의 값을 확인.
frm.preview.src = img;
var preview = document.getElementById('preview');
var width = preview.clientWidth;
var height = preview.clientHeight;
파일 값을 폼의 preivew라는 name(또는 id)을 가진 요소에 넣어준다.(이미지 태그이기 때문에 src접근이 가능)
요소의 크기를 구하는 clientWidth와 clientHeight를 사용하여 너비와 높이 값을 구한다.
clientWidth, clientHeight는 border와 스크롤바의 크기는 제외한다.
- clientWidth : 실제 보여지는 대상이 차지하는 공간 중 너비의 값
- clientHeight : 실제 보여지는 대상이 차지하는 공간 중 높이의 값
이 방법을 이용해 이미지의 크기를 제한하는 구현도 가능하다.
+ 2021.11.14 소스 수정
댓글을 통해 소스의 에러가 있음을 확인했다.
에러의 원인은 크로스브라우징이었다. 크롬에서는 보안상의 이유로 파일 업로드시 전체 경로가 입력되지 않는데(fakepath) IE에서는 인터넷 옵션에 의해 전체 경로를 가져올 수 있었던 거 같다. => 사실 이 방법도 좋지 않은 방법이었던 것 같다.
수정한 소스는 FileReader 객체를 이용해 readAsDataURL 함수를 사용했다.
readAsDataURL은 파일을 파일 경로가 아닌 Base64 Encode 문자열로 반환해준다. 그래서 이미지 소스를 보면 아래와 같이 파일 정보를 확인 할 수 있다. 아래 경로를 새 창에서 조회하면 해당 이미지를 확인할 수 있다.
onloadend 파일 읽고 난 후 target.result를 하면서 이미지 미리보기를 했다.
또 기존 소스는 이미지가 로드되기 전에 사이즈를 구하는 문제가 있어 이미지가 로드된 후 사이즈를 구할 수 있도록 수정했다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>이미지 구하기</title>
<script>
function imgCheck() {
var preview = document.getElementById("preview");
var input = document.getElementById("IMG_FILE");
var file = new FileReader();
file.readAsDataURL(input.files[0]);
file.onloadend = function(event) {
preview.src = event.target.result;
}
preview.onload = function() {
var width = preview.clientWidth;
var height = preview.clientHeight;
alert("width : " + width + " | height : " + height);
}
}
</script>
</head>
<body>
<form id="frm">
<img src="" border="0" name="preview" id="preview" ><br>
<input type="file" name="IMG_FILE" id="IMG_FILE" onchange="imgCheck()" >
</form>
</body>
</html>+ 피드백은 언제나 환영입니다 :)
반응형
'Programming language > Javascript,jQuery' 카테고리의 다른 글
| fullpage.js 사용법 (2) | 2018.09.10 |
|---|---|
| [Javascript]파일 확장자 체크하기 (0) | 2018.08.31 |
| DOM(Document Object Model) (0) | 2018.08.21 |
| [Javascript]div modal창 만들기 (0) | 2018.06.26 |
| [Javascript]id값 가져오기 (0) | 2018.06.25 |
Contents
소중한 공감 감사합니다.