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

仕様

仕様書 策定状況 コメント
File API
Blob の定義
草案 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
BlobChrome 完全対応 5Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Blob() constructorChrome 完全対応 20Edge ? Firefox 完全対応 13
補足
完全対応 13
補足
補足 Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
IE 完全対応 10Opera 完全対応 12Safari 完全対応 8WebView Android 完全対応 37Chrome Android 完全対応 25Firefox Android 完全対応 14
補足
完全対応 14
補足
補足 Before Firefox 16, the second parameter, when set to null or undefined, leads to an error instead of being handled as an empty dictionary.
Opera Android ? Safari iOS ? Samsung Internet Android ?
arrayBuffer()Chrome 完全対応 76Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
sizeChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 未対応 なしChrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
slice()Chrome 完全対応 21
完全対応 21
未対応 5 — 25
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 13
補足
完全対応 13
補足
補足 Prior to Firefox 12, there was a bug that affected the behavior of Blob.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.
未対応 5 — 13
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 12Safari 完全対応 5.1
接頭辞付き
完全対応 5.1
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 25
完全対応 25
未対応 18 — 25
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
stream()Chrome 完全対応 76Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
text()Chrome 完全対応 76Edge 未対応 なしFirefox 完全対応 69IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 76Chrome Android 完全対応 76Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
typeChrome 完全対応 5Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 11Safari 完全対応 5.1WebView Android 未対応 なしChrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連項目