Blob
Blob
オブジェクトは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します。テキストやバイナリーデータとして読み込んだり、ReadableStream
に変換してそのメソッドを使ったデータ処理をしたりすることができます。
Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File
インターフェイスは Blob をベースにしており、 Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。
Blob の使用
コンストラクター
Blob()
-
コンストラクターに渡された配列内のすべてのデータを連結したものを含む、新しく作成された
Blob
オブジェクトを返します。
インスタンスプロパティ
Blob.prototype.size
読取専用-
Blob
オブジェクトに含まれるデータのサイズ (バイト単位)。 Blob.prototype.type
読取専用-
Blob
に含まれるデータの MIME タイプを示す文字列。タイプが不明な場合、この文字列は空です。
インスタンスメソッド
Blob.prototype.arrayBuffer()
-
Blob
の全内容をバイナリーデータとして含むArrayBuffer
で解決するプロミスを返します。 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 の[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)を作成し、型付き配列のデータを含む新しい `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 として読み込むことができます。
仕様書
Specification |
---|
File API # blob-section |
ブラウザーの互換性
BCD tables only load in the browser