MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Blob

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

Blob 객체는 파일과 흡사한 불변 객체로 raw data입니다. 데이터를 표현하기에 필연적으로 자바스크립트 네이티브 포맷이 아닙니다. File 인터페이스는 기본적으로 Blob을 통해 이뤄지며, blob의 함수들을 상속받고 확장하여 사용자 시스템의 파일을 지원해줍니다.

Blob을 생성하는 가장 쉬운 방법으로는 Blob()  생성자를 호출하는 것입니다. 다른 방법으로는 slice() 메서드를 사용하여 다른 blob의 부분 데이터로 구성된 blob을 만드는 것입니다.

주의 : slice() 메서드는 기본적으로 길이 값을 두 번째 파라미터로 가져가며 이는 새로 생성 할 Blob의 byte 단위의 길이 값입니다. 만약 시작 바이트와 길이값을 초과하는 값을 파라미터로 준다면 리턴되는 Blob은 소스 Blob에서 시작과 끝을 포함하는 Blob이 될 것입니다. (역주: 복사와 동일한 결과)

생성자

Blob()
새로 생성된 Blob 객체를 반환한다.  이는 파라미터로 주어진 값들의 연속적인 배열 형태이다.

속성

Blob.size Read only
Blob 객체에 포함된 데이터의 바이트 단위의 사이즈를 의미한다. 
Blob.type Read only
Blob에 포함된 데이터의 MIME 타입을 의미한다. 만약 unknown으로 나올 경우, 이 문자열은 비어있는 것이다.

함수

Blob.slice()
새로운 Blob 객체를 반환한다. 반환되는 Blob 객체는 소스가 되는 Blob 객체에서 파라미터로 주어진 바이트 단위 만큼의 데이터를 포함하고 있다.
주의: slice()슬라이스 메서드 사용에 있어서  제조사와 버전 별  접두사가 붙어 있으니 주의해야 한다. blob.mozSlice() 는 Firefox 12와 더 이전 버전에서 쓰이며, Safari에서는 blob.webkitSlice()로 쓰인다.  더 오래전 버전의 slice() 메서드는 제조사별 접두사가 없으며 내부적으로 다른 의미를 지니고 있으며 구식이다.  또한 blob.mosZlice() 메서드는 Firefox 30 버전에서 삭제되었다.

예제

Blob 생성자 사용 예시

아래 코드 참조 :

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob

아래의 코드와 같다:

var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // the blob

BlobBuilder 인터페이스는 Blob들을 생성하는 다른 방법이다. 그렇지만 이미 폐기(deprecated)된 방법으로 더 이상 유효하지 않다.

blob을 사용해 typed array 만들기 예제 

아래 코드 참조:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url은 이런식이 될 것이다: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// 이제 만들어낸 URL을 일반적인 URL 처럼 쓸 수 있다. 예를 들자면 img.src, 같은 곳 등.

Blob에서 데이터 추출 예제

Blob에서 데이터를 읽는 유일한 방법은 FileReader 를 사용하는 것이다. 아래의 코드는 Blob에서 typed array로 데이터를 가져오는 것을 다룬다.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result는 blob에서 가져온 컨텐츠를 typed array로 갖고 있다. 
});
reader.readAsArrayBuffer(blob);

FileReader 에서 다른 메서드를 사용한다면, Blob에서 데이터를 string이나 URL 형태의 데이터도 읽어 올 수 있다.

명세서

명세서 상태 비고
File API
The definition of 'Blob' in that specification.
Working Draft 기초 정의(Initial definition.)

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 5[1] 4[2] 10 11.10[1] 5.1[1]
slice() 10 webkit
21
5 moz[3]
13
10 12 5.1 webkit
Blob() constructor 20 13.0 (13.0) 10 12.10 6
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 13.0 (13.0) ? ? ?
slice() ? ? ? ? ?
Blob() constructor ? ? ? ? ?

[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from Array.slice() and String.slice(), WebKit removed support and added support for the new syntax as Blob.webkitSlice().

[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from Array.slice() and String.slice(), Gecko removed support and added support for the new syntax as mozSlice().

[3] Prior to Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

Chrome Code - Scope Availability

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

Cu.importGlobalProperties(['Blob']);

Blob is available in Worker scopes.

같이 보기

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: kuil09
 최종 변경: kuil09,