[자바스크립트] Blob 객체 알아보기

Blob 객체 알아보기

Blob 객체란 무엇인가요?

Blob(Binary Large Object) 객체는 자바스크립트에서 바이너리 데이터를 나타내는 객체입니다. 이미지, PDF 파일, 음악 파일 등 다양한 종류의 파일을 메모리 상에서 표현할 때 사용됩니다. Blob 객체는 파일 시스템과는 독립적으로 존재하며, 네트워크를 통해 전송하거나, URL 객체를 생성하여 다운로드를 유도하는 등 다양한 용도로 활용됩니다.

Blob 객체의 주요 특징

• 바이너리 데이터 표현: 이미지 데이터, PDF 파일 등 다양한 형태의 바이너리 데이터를 담을 수 있습니다.
• 파일 시스템 독립성: 실제 파일 시스템과 연동되지 않고 메모리 상에서 독립적으로 존재합니다.
• URL 생성: Blob 객체를 이용하여 URL을 생성하여 다운로드를 유도할 수 있습니다.
• File 객체 변환: Blob 객체를 File 객체로 변환하여 파일 업로드 시 사용할 수 있습니다.

Blob 객체 생성하기

// 텍스트 데이터로 Blob 객체 생성
const textBlob = new Blob(['Hello, world!'], { type: 'text/plain' });

// ArrayBuffer로 Blob 객체 생성
const arrayBuffer = new ArrayBuffer(8);
const view = new Uint8Array(arrayBuffer);
view.set([72, 101, 108, 108, 111]);
const arrayBufferBlob = new Blob([arrayBuffer], { type: 'application/octet-stream' });

// 다른 Blob 객체와 합치기
const combinedBlob = new Blob([textBlob, arrayBufferBlob]);

• type 속성: Blob 데이터의 MIME 타입을 지정합니다.
• Blob 생성자: 배열을 인자로 받아 여러 개의 Blob을 합쳐 새로운 Blob을 생성할 수 있습니다.

Blob 객체 활용 예시

• 이미지 다운로드:

  const link = document.createElement('a');
  link.href = URL.createObjectURL(imageBlob);
  link.download = 'image.png';
  link.click();

• 파일 업로드:

  const formData = new FormData();
  formData.append('file', blob, 'filename.txt');

• Canvas에 이미지 그리기:

  const image = new Image();
  image.onload = () => {
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
  };
  image.src = URL.createObjectURL(imageBlob);

Blob 객체 관련 API

• URL.createObjectURL(): Blob 객체를 URL로 변환합니다.
• URL.revokeObjectURL(): 생성된 URL을 무효화합니다.
• FileReader: Blob 객체의 내용을 읽어올 수 있습니다.