TIL-24.05.01

 

 

 

문제점

input 태그에 넣은 이미지 파일 분석하기

// html
<input type="file" accept="image/*" id="file" />


// JS
const fileInput = document.querySelector('#file');

fileInput.addEventListener('change', onFileChange);

function onFileChange(e) {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);

  const image = new Image();
  image.src = url;
  image.onload = () => {
    ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    fileInput.value = null;
  };
}

 

 

타입이 file인 input태그에 이미지파일을 넣어서, <canvas> 내부를 해당 이미지로 채우는 기능의 함수이다.

change event가 발생하면 event.target.files로 파일 배열을 받을 수 있고, 배열의 요소로 File객체가 들어있다.

File객체의 정체가 궁금해 찾아보았다. File객체를 말하기전, Blob객체를 먼저 말하는게 좋을듯하다.

Blob(Binary Large Object)객체란 일반적으로 이미지,오디오,비디오 파일과 같은 이진데이터를 처리할때 사용되는 객체다. 파일과 유사한 형태로 이진데이터를 캡슐화하며, 이를 활용하기위해 메서드들을 제공한다. File객체는 이 Blob객체를 상속한 객체이므로, 동일한 특성을 가진다. 추가적으로 파일이름,크기,형식 등의 메타정보가 File객체에 저장되어있는것이다.

그러면 또 궁금해졌다. 

클라이언트와 서버가 이미지파일을 주고받을때, File객체로 통신할까 Blob객체로 통신을 할까..

이에 대해 찾아보니, 서버와 클라이언트 사이에서 이미지 파일을 전송할 때는 주로 File객체를 사용한다. File객체는 이미지 뿐만 아니라 추가적인 메타데이터를 포함하는 객체이기때문이다. 

클라이언트 측에서 사용자가 파일을 선택하면 File객체를 생성하고, 이를 FormData 객체에 추가하여 서버에 전송하는 방식이다.

즉, 이미지 파일을 서버와 클라이언트 사이에서 통신할 때는 주로 File객체가 사용되며, Blob객체는 데이터를 처리하거나 다룰 때 사용한다. 

 

 

 

 

 

 

알게된점

JS에는 수많은 객체들이 존재하는것같다...하나하나 알면알수록 뿌듯하기도하고..