Blob

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

Blob の利用

blob ではないオブジェクトやデータから Blob を生成する簡単な方法は Blob() コンストラクターを使用することです。他にも、slice() メソッドを利用し、他の blob データからその一部を blob として生成する方法があります。ユーザーのファイルシステム上のファイルの Blob オブジェクトを取得するには、File のドキュメントをご覧ください。

Blob オブジェクトを受け入れる API も、File のドキュメントに掲載しています。

コンストラクター

Blob(blobParts[, options])

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

プロパティ

Blob.size 読取専用

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

Blob.type 読取専用

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

メソッド

Blob.slice([start[, end[, contentType]]])

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

Blob.stream()

Returns a ReadableStream that can be used to read the contents of the blob.

Blob.text()

Returns a promise that resolves with a USVString containing the entire contents of the blob interpreted as UTF-8 text.

Blob.arrayBuffer()

Returns a promise that resolves with an ArrayBuffer containing the entire contents of the blob as binary data.

使用例

Blob コンストラクターの使用例

Blob() コンストラクター で、他のオブジェクトから blob を生成できます。例えば、文字列から blob を生成するには以下のようにします:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Blob を用いて Typed Array の URL を生成する例。

The following code creates a JavaScript typed array and creates a new Blob containing the typed array's data. It then calls createObjectURL() to convert the blob into a URL.

HTML

<p>This example creates a typed array containing the ASCII codes
   for the space character through the letter Z, then converts it
   to an object URL. A link to open that object URL is created.
   Click the link to see the decoded object URL.</p>

JavaScript

The main piece of this code for example purposes is the typedArrayToURL() method, which creates a Blob from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the <img> element's src attribute (assuming the data contains an image, of course).

let typedArrayToURL = (typedArray, mimeType) => {
  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}

let bytes = new Uint8Array(59);

for (let i=0; i<59; i++) {
  bytes[i] = 32+i;
}

let url = typedArrayToURL(bytes, "text/plain");
let link = document.createElement("a");
link.href = url;
link.innerText = "Open the array URL";
document.body.appendChild(link);

Result

Click the link in the example to see the browser decode the object URL.

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

var text = await (new Response(blob)).text();

By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

Obsolete: Creating blobs with BlobBuilder

Before the Blob() constructor was available, creating a new blob was performed using the BlobBuilder API, which is now deprecated and should no longer be used:

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');

仕様

ブラウザー実装状況

関連項目

• BlobBuilder
• FileReader
• File
• URL.createObjectURL
• Using files from web applications