Blob

Blob オブジェクトはファイルに似たオブジェクトで、immutable な生データです。データを表す blob は必ずしも JavaScript ネイティブなフォーマットではありません。File インターフェースは Blob を基礎にしており、その機能を継承する一方で、ユーザのシステム上のファイルをサポートするための機能を拡張しています。

Blob を生成する簡単な方法は Blob() コンストラクタを使用することです。他にも、slice() メソッドを利用し、他の blob データからその一部を blob として生成する方法があります。

コンストラクタ

Blob()

引数に取ったデータの連続する配列を内包する、新しく生成した Blob オブジェクトを返します。

プロパティ

Blob.size 読取専用

Blob オブジェクトが含むデータのバイトサイズ

Blob.type 読取専用

Blob に含まれるデータの MIME タイプを表す文字列。もしタイプが不明な場合はから文字列となる。

メソッド

Blob.slice()

sourceBlob 内の指定した範囲のデータを含む新しい Blob オブジェクトを返す。

使用例

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

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 で取り出すこともできます。

仕様

ブラウザ互換性

slice() の実装について

slice はもともと第2引数に length をとり、新しい Blob のバイト長を指定するものとして定義されていました。start + length がもとの Blob のsize を超えた場合、返ってくる Blob は、start からもとの Blob の末端までを含みます。

この slice メソッドは Firefox 4, WebKit, そして Opera 11.10 で実装されました。しかし、構文が Array.slice() や String.slice() と異なることが分かり、Gecko と WebKit はこのメソッドを削除し、現在の構文を Blob.mozSlice/Blob.webkitSlice として実装しました。

Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) 以降と Chrome 21 以降では, slice() のプレフィックスは削除されています。mozSlice() のサポートも Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) 以降削除されています。‡

Gecko notes

Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 以前では, slice() に影響を及ぼすバグがありました。符号有 64-bit の範囲を超える start と end のポジションをしていすると正常に動作しなくなるというバグですが、現在は符号なし 64-bit の範囲で正常に動作するように修正されています。

Chrome Code - Scope Availability

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

Cu.importGlobalProperties(['Blob']);

Blob は Worker スコープでも使用することができます。

See also

• BlobBuilder
• File
• Components.utils.importGlobalProperties