1. FileReader 객체
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻습니다.
1-1. FileReader 메서드
MDN 사이트에서 찾아보니 FileReader에 대한 설명이 자세히 나와있었다. 그 중에 우리가 볼 것은 딱 세가지!!!
| FileReader.readAsDataURL | Blob의 내용을 읽어서 URL로 표현 (여기에서 URL은 base64) |
| FileReader.onload | 파일 읽기가 완료되면 호출되는 콜백함수 |
| FileReader.readyState | FileReader의 상태를 나타내는 숫자
|
2. 코드
<!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>CANVAS_1</title>
</head>
<body>
<input type="file">
<canvas id="canvas"></canvas>
</body>
</html><HTML 코드>
window.addEventListener('DOMContentLoaded', (e) => {
window.$canvas = document.querySelector("#canvas");
window.ctx = $canvas?.getContext('2d');
document.querySelector('input')?.addEventListener('change',(e)=>loadFile(e)); //파일 업로드 이벤트는 input의 change로 잡을 수 있다.
});
function loadFile(e){
const file = e.target.files[0];
console.log(file);
if(!file.type.match(/image.*/)){ //이미지 파일이 아니라면 필터링
alert('이미지 파일이 아닙니다.');
return;
}
const reader = new FileReader();
reader.onload = (e)=>{
console.log(e);
const img = new Image();
img.onload = ()=>{
$canvas.width = img.width;
$canvas.height = img.height;
ctx.drawImage(img,1,1);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}<javascript 코드>
메서드 실행순서
- input의 change메서드에 이벤트 핸들러를 지정한다. (input의 파일 업로드는 change 이벤트가 발생!)
- 사용자가 파일을 업로드
- change 이벤트 핸들러인 loadFile() 함수 호출
- 이벤트 객체로부터 가져온 file 정보를 기반으로 FileReader의 readAsDataURL메서드 호출
- readAsDataURL메서드가 파일을 모두 읽으면 onload 콜백함수 호출
- onload함수 안에서는 Image객체를 생성하고 src를 readeAsDataURL 메서드의 결과물인 Base64로 읽힌 파일(e.target.result) 을 넣어준다.
- Image파일의 로드가 모두 끝나면 img.onload 콜백함수가 또 실행되는데 이 함수에서는 canvas의 크기와 canvas에 설정될 이미지를 설정해준다.
위의 코드에서 console.log의 결과물이다.
ProgressEvent객체의 target은 FileReader인데 FileReader의 result를 보면 base64로 인코딩된 file을 볼 수 있고, readerState도 DONE(2) 이 된것을 볼 수 있다.
참고사이트 : https://developer.mozilla.org/ko/docs/Web/API/FileReader
FileReader - Web API | MDN
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는
developer.mozilla.org
'코딩이야기 > JS' 카테고리의 다른 글
| [canvas] 캔버스로 모자이크 하기 (0) | 2022.11.01 |
|---|---|
| 객체 DEEP COPY (0) | 2022.10.17 |
| JavaScript 배열 랜덤 섞기 (0) | 2022.10.17 |