JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL)

웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 

 

단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다.

 

 

Blob이란?

 

blob은 binary large object의 약자입니다.

 

이름처럼 바이너리 형태로 큰 객체를 저장하며, 이 객체는 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 나타냅니다.

 

blob의 경우 Chrome에서 954MB 정도의 이진 데이터를 저장할 수 있고, 이는 환경에 따라 다릅니다. 

 

blob으로 저장할 수 있는 최대 용량을 구하는 방법에 대해 궁금하신 분들은 아래 링크를 참조해주세요.

 

JS: chrome 브라우저에서 blob 최대 용량 구하기

 

blob은 맨 처음에는 짐 스타키라는 데이터 베이스 설계자가 1970년대에 처음 발명했다고 합니다.

 

Blob은 기존 DB 시스템(SQL)에서 정의되지 않는 데이터를 정의하기 위해 사용되었는데, 탄생 당시에는 데이터를 저장하기에 너무 커서 잘 사용하지 않았지만 기술이 발전함에 따라 디스크 공간이 점점 저렴해지면서 사용되게 되었습니다.

 

웹 브라우저에서는 메모리 또는 디스크에 Blob을 저장할 수 있습니다.

 

한 가지 유의해야 할 점은 Blob 또는 파일 자체는 사실 데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 포인터 객체입니다.

 

아래서 살펴볼 blob 객체의 splice와 같은 함수를 써보면 포인터가 가리키는 Blob데이터를 Byte단위로 출력할 수도 있습니다.

 

Blob과 파일

 

Javascript의 File객체는 입력받은 파일에 대한 정보를 얻어오는 객체입니다.

 

File은 drag-and-drop API나, 파일 시스템 API를 통해서도 얻을 수 있습니다.

 

신기한 점은 File 객체도 name과 lastModifiredDate 속성이 존재하는 Blob 객체라는 점입니다. 

 

정확하게 얘기하면 Javascript의 File은 Blob의 하위 자료형입니다. 

 

따라서 File 객체에서도 Blob에 있는 속성과 메서드를 사용할 수 있습니다.

 

Blob 생성자

 

Blob의 생성자는 새로운 Blob 객체를 반환하는 속성입니다.

 

생성 시 인수로 array와 옵션을 받습니다.

 

const blob = new Blob(array, options);

 

이때 Array는 ArrayBuffer, File 등을 전달받을 수 있습니다.

 

new Blob([new ArrayBuffer(data)], { type: 'video/mp4' });
new Blob(new Uint8Array(data), { type: 'image/png' });  
new Blob(['<div>Hello Blob!</div>'], {
  type: 'text/html',
  endings: 'native'
});

 

옵션으로는 type과 endings를 설정 할 수 있습니다.

 

type 데이터의 MIME 타입을 설정하고 ""가 디폴드 값입니다.

 

endings는 데이터가 텍스트일때 개행 문자 '\n'을 어떻게 해석할지를 지정하는 값입니다.

 

기본값으로는 transparent을 설정하면 개행 문자를 바꾸지 않고 블록 데이터로 복사하고, native를 지정하면 사용 중인 OS에 맞춰서 줄 바꿈 문자 인식하여 데이터를 삽입합니다.

 

 

Blob 객체의 속성

 

Blob 객체의 속성을 한번 알아보겠습니다.

 

Blob객체의 속성에는 size와 type이 있습니다.

 

size는 blob객체의 사이즈를 나타내고 바이트(Byte) 단위의 크기를 나타냅니다.

 

type은 blob 객체의 mime 타입을 나타냅니다.

 

Blob 객체의 메서드

 

앞서 알아본 것처럼 웹 브라우저는 메모리 또는 디스크에 blob을 저장할 수 있습니다.

 

Blob파일이 비디오 파일과 같은 큰 파일일 경우, 메모리에 적재하려면 slice 메서드를 통해 작은 조각으로 먼저 분리해야 할 수도 있습니다.

 

Blob API는 비동기 방식으로 동작하며, 워커 스레드를 사용할 경우에는 동기적으로도 동작을 시킬 수 있습니다.

 

 

example)

 

간단하게 blob의 splice 메서드를 이용해서 이미지를 1/10로 자르고 다시 합쳐보는 예제를 살펴보겠습니다.

const blob = new Blob();  // New blob object
blob.slice(start, end, type);

start는 시작 범위(Byte, Number), end는 종료 범위(Byte, Number), type은 새로운 Blob 객체의 MIME 타입(String)을 지정합니다.

// Blob 객체(blob)에서 첫 1KB의 JPG Blob 객체(chunk)를 생성
const chunk = blob.slice(0, 1024, 'image/jpeg');

다음 예제는 위에서 살펴본 Blob 객체(약 43KB의 PNG 이미지로 생성한)를 10개의 Chunk로 조각냅니다.
그리고 각 Chunk를 chunks 배열에 순서대로 저장합니다.

const chunks = [];
const numberOfSlices = 10;
const chunkSize = Math.ceil(blob.size / numberOfSlices);
for (let i = 0; i < numberOfSlices; i += 1) {
  const startByte = chunkSize * i;
  chunks.push(
    blob.slice(
      startByte,
      startByte + chunkSize,
      blob.type
    )
  );
}
console.log(chunks);  // This is as follows..

이렇게 조각낸 Blob 객체들(Chunks)은 필요에 의해 간단하게 다시 합칠 수 있습니다.

 

const mergedBlob = new Blob(
  chunks,
  { type: blob.type }
);
document.getElementById('merged-image').src = window.URL.createObjectURL(mergedBlob);
document.getElementById('chunk-image').src = window.URL.createObjectURL(chunk[0]);

// Revoke Blob URL..

아래 이미지는 위 코드의 결과로 왼쪽 이미지는 #merged-image 요소, 오른쪽 이미지는 #chunk-image 요소입니다.
오른쪽 이미지가 약 1/10로 잘려서 출력되는 것을 볼 수 있습니다.

 

 

Blob의 Data URL

 

url이란 보통 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약을 말합니다.

(참고: uri와 url의 차이)

 

Blob 객체를 가리키는 URL을 생성하기 위해 window.URL객체의 메서드인 createObjectURL 또는 revmoeObjectURL을 사용할 수 있습니다.

 

 

createObjectURL 

 

URL.createObjectURL() 은 blob객체를 가리키는 URL을 만들 수 있습니다.

 

이 URL은 DOM이나 CSS에 활용될수 있습니다.

 

하지만 Blob URL은 영구적이지는 않기 때문에 URL을 생성한 문서를 벗어나거나 브라우저를 종료하면 더 이상 유효하지 않습니다.

 

예를 들어 Blob URL을 로컬 스토리지에 저장한 경우 새로운 세션에서 이를 활용하여 Blob 객체를 불러올 수 있습니다.

 

example

// Blob URL 생성
const objectURL = URL.createObjectURL(object)
console.log(objectURL) // blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30

// Blob URL을 이용하여 이미지 출력
<img src="blob:http://localhost:1234/28ff8746-94eb-4dbe-9d6c-2443b581dd30" alt="Blob URL Image" />

 

 

revokeObjectURL 

 

URL.revokeObjectURL() 은 URL.createObjectURL()을 통해 생성한 기존 URL을 폐기하는 명령어입니다.

 

revokeObjectURL을 통해 해제하지 않으면 기존 URL을 유효하다고 판단하고 자바스크립트 엔진 안에서는 GC 되지 않습니다.

 

따라서 메모리 누수를 방지하려면 생성된 URL을 DOM과 바인딩한 후에는 해지하는 것이 좋습니다.

 

 

example)

// Create Blob URL
const objectURL = window.URL.createObjectURL(blob);

// Revoke Blob URL after DOM updates..
window.URL.revokeObjectURL(objectURL);

 

마무리

 

지금까지 Blob에 대해 알아보았습니다.

 

항상 쓰고는 있었지만 정확하게 구조를 알지 못했던 Blob에 대해 정리하고 나니 정확하게 어떤 원리로 동작되는지 이해가 되어 다음번에 사용할 때 좀 더 효율적으로 Blob 객체를 이용할 수 있을 것 같습니다.

 

앞으로도 Web개발을 하며 모르는 개념이 있으면 정리해나갈 예정입니다.

 

감사합니다.

 

 

 

참조

 

Blob(블랍) 이해하기

 

Blob 객체

 

 

Blob