Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェイスは Blob を基礎にしており、その機能を継承する一方で、ユーザーのシステム上のファイルをサポートするための機能を拡張しています。
blob ではないオブジェクトやデータから Blob を生成する簡単な方法は Blob() コンストラクターを使用することです。他にも、slice() メソッドを利用し、他の blob データからその一部を blob として生成する方法があります。ユーザーのファイルシステム上のファイルの Blob オブジェクトを取得するには、File のドキュメントをご覧ください。
Blob オブジェクトを受け入れる API も、File のドキュメントに掲載しています。
注記: slice() メソッドはもともと第 2 引数に length メソッドをとり、新しい Blob のバイト長を指定するものとして定義されていました。start + length がもとの Blob の size を超えた場合、返ってくる Blob は、start からもとの Blob の末端までを含みます。
slice() メソッドは Firefox 12 以前では blob.mozSlice()、Safari では blob.webkitSlice() とベンダー接頭辞つきで実装されています。また、古いバージョンにおいて slice() がベンダー接頭辞なしで実装されていることがありますが、現状と異なる古いセマンティクスの場合があります。Firefox 30 では、blob.mozSlice() は削除されています。コンストラクター
Blob(blobParts[, options])- 引数に取ったデータの連続する配列を内包する、新しく生成した
Blobオブジェクトを返します。
プロパティ
Blob.isClosed読取専用- blob で
Blob.close()メソッドが呼び出されたかを示す真偽値です。閉じられた blob を読み取ることはできません。 Blob.size読取専用Blobオブジェクトが含むデータのバイトサイズBlob.type読取専用Blobに含まれるデータの MIME タイプを表す文字列。もしタイプが不明な場合は空文字列となる。
メソッド
Blob.close()- blob オブジェクトを閉じて、おそらく背後のリソースを解放します。
Blob.slice([start[, end[, contentType]]])- sourceBlob 内の指定した範囲のデータを含む新しい
Blobオブジェクトを返す。
使用例
Blob コンストラクターの使用例
Blob() コンストラクター で、他のオブジェクトから blob を生成できます。例えば、文字列から blob を生成するには以下のようにします:
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
Blob コンストラクターが使用可能になる前は、Blob を生成するために BlobBuilder APIを利用することもできましたが、現在は非推奨となっているため使用するべきではありません。
var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');
Blob を用いて Typed Array の URL を生成する例。
コード:
var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
Blob からデータを読み出す例
Blob からコンテンツを読み出す唯一の方法は、 FileReader を用いることです。次のコードは、 Blob からコンテンツを typed array として読み出します。
var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
FileReader の他のメソッドを用いることで、 Blob のコンテンツを文字列や data URL で取り出すこともできます。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| File API Blob の定義 |
草案 | Initial definition. |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| 基本サポート | 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() コンストラクター |
20 | (有) | 13.0 (13.0) | 10 | 12.10 | 6 |
close() および isClosed |
? | 未サポート | 未サポート[4] | ? | ? | ? |
| 機能 | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | ? | (有) | 13.0 (13.0) | ? | ? | ? |
slice() |
? | (有) | ? | ? | ? | ? |
Blob() コンストラクター |
? | (有) | ? | ? | ? | ? |
close() および isClosed |
? | 未サポート | 未サポート[4] | ? | ? | ? |
[1] 第 2 引数が length である slice() は WebKit、Opera 11.10 で実装されました。しかし、構文が Array.slice() や String.slice() と異なることが分かり、WebKit はこのメソッドを削除し、現在の構文を Blob.webkitSlice() として実装しました。
[2] 第 2 引数が length である slice() は Firefox 4 で実装されました。しかし、構文が Array.slice() や String.slice() と異なることが分かり、Gecko はこのメソッドを削除し、現在の構文を mozSlice() として実装しました。
[3] Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 以前では、slice() に影響を及ぼすバグがありました。符号有 64-bit の範囲を超える start と end のポジションを指定すると正常に動作しなくなるというバグですが、現在は符号なし 64-bit の範囲で正常に動作するように修正されています。
[4] バグ 1048325 をご覧ください。
Gecko に関する補足: 特権コードで使用する
chrome コード、JSM、Bootstrap スコープで使用するには、以下のようなインポートが必要です:
Cu.importGlobalProperties(['Blob']);
Blob は Worker スコープでも使用することができます。