Blob
オブジェクトは blob を表しており、これは不変の生データであるファイルのようなオブジェクトです。テキストやバイナリデータとして読み込んだり、ReadableStream
に変換してそのメソッドを使ったデータ処理をしたりできます。
Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File
インターフェイスは Blob をベースにしており、Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。
Blob の利用
他の Blob 以外のオブジェクトやデータから Blob
を作成するには、Blob()
コンストラクタを使用します。他の Blob のデータのサブセットを含む Blob を作成するには、slice()
メソッドを使用します。ユーザーのファイルシステム上のファイルの Blob
オブジェクトを取得するには、File
のドキュメントを参照してください。
Blob
オブジェクトを受け入れる API も、File
のドキュメントに掲載しています。
コンストラクタ
Blob()
- コンストラクタに渡された配列内のすべてのデータを連結したものを含む、新しく作成された
Blob
オブジェクトを返します。
インスタンスプロパティ
Blob.prototype.size
読取専用Blob
オブジェクトに含まれるデータのサイズ (バイト単位)。Blob.prototype.type
読取専用Blob
に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。
インスタンスメソッド
Blob.prototype.arrayBuffer()
Blob
の全内容をバイナリデータとして含むArrayBuffer
で解決する Promise を返します。Blob.prototype.slice()
- 呼び出された Blob の指定されたバイト数範囲のデータを含む新しい
Blob
オブジェクトを返します。 Blob.prototype.stream()
Blob
の内容を読み込むために使用できるReadableStream
を返します。Blob.prototype.text()
- UTF-8 テキストとして解釈された Blob の内容全体を含む
USVString
で解決する Promise を返します。
例
Blob の作成
Blob()
コンストラクタは、他のオブジェクトから Blob を作成することができます。たとえば、JSON 文字列から Blob を作成するには、次のようにします。
const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
型付き配列の内容を表す URL の作成
次のコードは、JavaScript の型付き配列を作成し、型付き配列のデータを含む新しい Blob
を作成します。次に、URL.createObjectURL()
を呼び出して、Blob を URL に変換します。
HTML
<p>この例では、スペース文字から文字 Z までの ASCII コードを含む型付けされた配列を作成し、
それをオブジェクト URL に変換します。
そのオブジェクト URL を開くためのリンクが作成されます。
リンクをクリックすると、デコードされたオブジェクト URL が表示されます。</p>
JavaScript
このコードの例示のための主要な部分は typedArrayToURL()
関数で、与えられた型付き配列から Blob
を作成し、それに対するオブジェクト URL を返します。データをオブジェクト URL に変換した後は、要素の <img>
属性の値として含む、さまざまな方法で使用することができます (もちろん、データに画像が含まれていることを前提としています)。
function typedArrayToURL(typedArray, mimeType) {
return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}
const bytes = new Uint8Array(59);
for(let i = 0; i < 59; i++) {
bytes[i] = 32 + i;
}
const url = typedArrayToURL(bytes, 'text/plain');
const link = document.createElement('a');
link.href = url;
link.innerText = 'Open the array URL';
document.body.appendChild(link);
結果
例のリンクをクリックすると、ブラウザがオブジェクトの URL をデコードしているのがわかります。
Blob からデータを抽出する
Blob
から内容を読み込む方法の 1 つは、FileReader
を使用することです。次のコードは、Blob
の内容を型付き配列として読み込みます。
const reader = new FileReader();
reader.addEventListener('loadend', () => {
// reader.result には blob の内容が型付き配列として格納されます。
});
reader.readAsArrayBuffer(blob);
Blob
から内容を読み込む別の方法としては、Response
を使用する方法があります。次のコードは、Blob
の内容をテキストとして読み取るものです。
const text = await (new Response(blob)).text();
または、Blob.prototype.text()
を使用します。
const text = await blob.text();
FileReader
の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
File APIBlob インターフェイス の定義 |
草案 | 初期定義 |
ブラウザ実装状況
BCD tables only load in the browser