javascript - input image width, height 구하는 방법
JavaScript를 사용하여 <input type="file">에 들어온 이미지 파일의 너비와 높이를 구하는 방법이 궁금하여 찾아본 내용입니다.
해당 기능에서 핵심이 되는 것은 javascript에서 사용되는 FileAPI인 'FileReader'인데요.
아래 실제 구현 코드를 통해 내용 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="fileUpload" name="file">
<!-- script -->
<script>
var fileInput = document.getElementById("fileUpload");
fileInput.onchange = function() {
var selectedFile = fileInput.files[0];
// selectedFile 확장자 체크
if (!(selectedFile.type == 'image/jpeg' || selectedFile.type == 'image/png')) {
alert('허용된 확장자가 아닙니다.');
fileInput.value = ''; // input value 초기화
return;
}
readImageFile(selectedFile); // width, height 구하기 위한 메서드
};
function readImageFile(file) {
console.log('===== readImageFile =====');
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
console.log('===== reader.onload =====')
var img = new Image();
img.src = e.target.result;
img.onload = function() {
var width = this.width;
var height = this.height;
console.log('width : ' + width);
console.log('height : ' + height);
}
}
};
</script>
</body>
</html>(input type="file"으로 들어온 이미지 파일의 너비와 높이를 구하는 코드)
/*
FileReader란?
웹 어플리케이션이 비동기적으로 파일의 내용을 읽는 데 사용되는 객체이며, File 혹은 Blob 객체로부터 내용을 읽어옵니다.
*/
동작 내용을 살펴보면, 먼저 FileReader 객체 생성 후에 사용되는 'readAsDataURL()' 메서드의 경우 바이너리 파일을 Base64 Encode 문자열로 반환하는 기능을 수행하는데요. 쉽게 파일 객체를 읽어 데이터 URL로 표현하는 기능을 합니다.
이어서 동작하는 'onload()'의 경우 load 이벤트의 핸들러로 파일 FileReader 객체의 읽기 동작이 성공적으로 완료되었을 때마다 발생됩니다.
e.target.result에서 사용된 'result' 속성은 파일의 내용을 반환하는데요. 여기서는 위 readAsDataURL() 메서드의 실행 결과인 URL이 반환됩니다.
readImageFile() 메서드를 포함한 전체 코드에는 input 태그에 업로드된 파일이 이미지 파일이 맞는지에 대한 확장자 검사 및 이미지 파일이 아닌 경우 input 태그를 초기화하는 코드까지 포함되어 있는데요.
필요한 경우 결과로 나온 width, height를 비교하여 원하는 작업을 수행할 수 있습니다.
< 참고 자료 >
'Programming > Javascript' 카테고리의 다른 글
| JavaScript 이벤트 전파 개념과 이벤트 전파 막는 방법 (0) | 2024.04.03 |
|---|---|
| Javascript 테이블 행의 값 가져오는 방법(table.rows / row.cells) (0) | 2022.10.19 |
| JavaScript 클립보드 복사하는 방법(Clipboard API, clipboard.js) (0) | 2022.06.17 |
| Javascript Cookie 쿠키 저장, 가져오기, 삭제 함수 (0) | 2022.06.03 |
| 구글맵 google map API 사용법 및 marker 추가, 변경하는 법 (JavaScript) (0) | 2022.02.26 |