Blob(Binary Large Objects)

이번 프로젝트에서 웹 내에서 이미지를 다운받을 수 있도록 해야했어서 찾아보다가 blob을 알게되었다.

 

blob은 이미지, 사운드나 비디오같이 멀티미디어 데이터를 다룰 수 있고, 데이터의 크기와 MIME 타입(image/png, image/jpg...)을 알 수 있고, 데이터를 재가공할 수 있다. 

 

방법은 그냥 간단한데 new Blob() 이렇게 생성자를 통하여 만들 수 있다. 

const blob = new Blob(fileObj)

 

blob의 기능은 아주 많지만, 그 중에서 후에 필요하겠다 생각드는 것들 몇가지를 정리해보았다. 필요하다면 아래의 mdn문서를 읽어보자!

https://developer.mozilla.org/ko/docs/Web/API/Blob

 

blob데이터는 읽을 수 없기 때문에 안에 들어있는 size나 type 데이터가 필요하다면 따로 stream()이나 fileReader을 사용해야한다.

 

Blob.prototype.slice

slice를 호출하면 blob 데이터에서 시작 바이트와 끝 바이트 범위를 복제하여 새로운 blob 객체를 만들 수 있다. 데이터의 사이즈가 크다면 잘게 조각내어 데이터값을 보내줄 수 있겠다.
(이 과정에서 content type 또한 변경시킬 수 있다.)

 

createBlobURL

blob객체를 url로 만들어줄 수 있는 함수다. 이 함수를 통해 생성된 url은 다른 window에서 재활용할 수 없고, 오직 생성된 window의 브라우저에서만 유효하다.

 

revokeObjectURL

createBlobURL()로 만든 url 데이터는 이 함수를 통해서만 폐기시킬 수 있다. 메모리 누수를 위해 꼭 이 함수를 사용하자.

 

Blob.prototype.arrayBuffer

ArrayBuffer로 이행하는 프로미스를 반환한다. 

 

* buffer?

특정 메모리 공간에 바이너리 데이터를 저장해두는 객체이다. 자바스크립트에서는 ArrayBuffer, AudioBuffer, SourceBuffer를 통해 buffer을 사용할 수 있다. (원래는 데이터가 저장될 곳의 메모리를 지정할 수 없었다.)

 

arrayBuffer 데이터를 읽기 위해서는 int32Array 생성자를 이용해 읽을 수 있다. (읽고 싶어 참을 수 없다면 아래의 이미지를 보자) 여기에서 희생된 pngwing의 이미지 url... ㅎ ❤️‍🔥

 

사실 아래 코드처럼 다운로드하기보다는 그냥 a tag의 download 속성을 이용하자... ^^ html에 좋은 속성 참 많다