[javascript] Blob 객체란?

 

 

 

Blob이란? 

 

Blob은 일련의 데이터를 처리하거나 간접 참조하는 객체다.

Blob이란 이름은 SQL 데이터베이스에서 유래하였으며 '대형 이진 객체(Binary Large Object)를 의미한다.

Blob은 대개 바이트의 크기를 알아내거나 해당 MIME 타입이 무엇인지 요청하며,

데이터를 작은 Blob으로 잘게 나누는 등의 작업에 사용된다.

 

데이터 자체라기보다는 데이터를 간접적으로 접근하기 위한 객체인 것이다.

JS에서 Blob(Binary Large OBject)은 주로 이미지, 오디오, 영상 등의 데이터를 다룰 때 사용한다.

(꼭 미디어 관련해서만 사용하는 것이 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있다.)

 

 

Blob 생성

const newBlob = new Blob(array, options);

Blob 생성자는 새로운 Blob 객체를 반환한다.
생성 시 인수로 array와 options을 받는다.

 

 

array

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'
});

Blob 생성자의 첫번째 인수로 ArrayBuffer, ArrayBufferView, Blob(File), DOMString 객체 또는 이러한 객체가 혼합된 Array를 사용할 수 있다.

 

 

var blob = new Blob([typedArray], {type: 'application/octet-binary'});

var audioBlob = new Blob([dataview], { type: type });

javascript에서 위와 같이 배열과 타입을 넣어 객체를 생성한다. 

 

 

 

var url = URL.createObjectURL(blob);

var url = URL.createObjectURL(audioBlob);

URL.createObjectURL()은 Blob 객체를 나타내는 URL를 포함한 다음과 같은 DOMString를 생성한다.(blob:URL)

 

이렇게 생성된 URL을 <a></a>(앵커) 태그에 연결시키면 다운로드를 받을 수 있다.

서버에서 직접 다운로드를 받는 것이 아니라 브라우저 상에 저장되어 있는 blob파일을 다운로드 받게 된다.

 

 

 

 

 

 

 

 

참고

 

https://uxicode.tistory.com/entry/Blob-%EA%B0%9D%EC%B2%B4

https://heropy.blog/2019/02/28/blob/

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=magnking&logNo=220950061851