Blob (블롭) 알아보기

Blob : Binary Large Objects

단순 텍스트 데이터가 이미지, 동영상 등 아닌 바이너리 데이터를 담을 수 있는 객체

 

생성자

Blob() 으로 블롭 객체를 만들 수 있다.

new Blob(array, options)

첫 번째 인자 는 배열

배열의 원소는 ArrayBuffer, ArrayBufferView, Blob, DOMString 중 하나여야 하며, 여러 종류를 섞어서 사용할 수도 있다. 

 

두 번째 인자는 옵션 객체

콘텐츠의 MIME 타입 문자열인 type 프로퍼티와 줄바꿈 문자를 설정하는 endings 프로퍼티를 가질 수 있다. 

endings 프로퍼티에 사용할 수 있는 값은 "transparent"와 "native"가 있는데 "transparent"를 사용하면

원래 있던 줄바꿈 문자를 그대로 사용하며 "native"를 사용하면 사용중인 OS에 맞춰 줄바꿈 문자를 바꾼다.

기본값은 "transparent"이다.

Blob 데이터는 화면에 표시하거나 서버로 전송할 수도 있고 사용자가 다운로드 받게 만들 수도 있다

이게 우리가 Blob 데이터를 사용하는 이유이다.

 

출처 블로그 

2015년 글이라 메서드 등 약간 다른 부분이 있으니 MDN 참고하기!

[JS] Blob와 Blob URL

 

속성

size와 type을 갖는다 (읽기 전용) 

size : Blob 객체가 담은 데이터의 바이트 단위의 사이즈

type : Blob 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환

 

메서드 

slice() : 다른 블롭의 일부에서 새로운 블롭을 생성

slice(start, end, contentType) : 0개 ~ 최대 3개의 인자를 받는다. 시작 바이트, 끝 바이트, 새로운 블롭에 지정할 contentType

이를 통해 chunk 를 생성할수 있다.

https://www.heropy.dev/p/QlwiuS

JS Blob(블랍) 이해하기

 

arrayBuffer(), stream(), text() 등이 있다. 

---

Blob URL

블롭 객체 가상의 URL을 부여하는 방법이 URL.createObjectURL() 메서드를 사용하는 것

 

window.URL.createObjectURL()

사용자의 컴퓨터에 있는 로컬 파일을 포함해, DOM File 객체를 사용해 참조된 데이터에 대한 참조로 사용할 수 있는 간단한 URL 문자열을 생성할 수 있게 해줍니다

 

같은 객체를 사용하더라도, createObjectURL()을 매번 호출할 때마다 새로운 객체 URL을 생성합니다. 각각의 URL을 더는 쓰지 않을 땐 URL.revokeObjectURL()을 사용해 하나씩 해제해줘야 합니다.

 

이를 통해 간단히 이미지 프리뷰를 보여줄 수 있다. 

 <img
    src={previewUrl}
    ...
    />

 

---

mdn에서 이정도로 잘 나와있는지 몰랐는데 반성.. 

MDN - 객체 URL을 사용하여 이미지 표시하기