Blob
メモ: この機能はウェブワーカー内で利用可能です。
Blob
インターフェイスは blob、すなわち不変の生データであるファイルのようなオブジェクトを表します。テキストやバイナリーデータとして読み込んだり、ReadableStream
に変換してそのメソッドを使ったデータ処理をしたりすることができます。
Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File
インターフェイスは Blob をベースにしており、 Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。
Blob の使用
コンストラクター
Blob()
-
コンストラクターに渡された配列内のすべてのデータを連結したものを含む、新しく作成された
Blob
オブジェクトを返します。
インスタンスプロパティ
インスタンスメソッド
Blob.arrayBuffer()
-
Blob
の全内容をバイナリーデータとして含むArrayBuffer
で解決するプロミスを返します。 Blob.bytes()
-
この
Blob
の内容を含むUint8Array
を返すプロミスを返します。 Blob.slice()
-
呼び出された Blob の指定されたバイト数範囲のデータを含む新しい
Blob
オブジェクトを返します。 Blob.stream()
-
Blob
の内容を読み込むために使用できるReadableStream
を返します。 Blob.text()
-
UTF-8 テキストとして解釈された Blob の内容全体を含む文字列で解決するプロミスを返します。
例
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>
要素の src
属性の値として含む、さまざまな方法で使用することができます(もちろん、データに画像が含まれていることを前提としています)。
function showViewLiveResultButton() {
if (window.self !== window.top) {
// この文書がフレーム内にある場合、最初にユーザーに独自のタブ
// またはウィンドウで開くよう指示します。そうでなければ、
// この例はうまく動作しません。
const p = document.querySelector("p");
p.textContent = "";
const button = document.createElement("button");
button.textContent = "上記のコード例の結果をライブで見る";
p.append(button);
button.addEventListener("click", () => window.open(location.href));
return true;
}
return false;
}
if (!showViewLiveResultButton()) {
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);
}
結果
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.text()
を使用します。
const text = await blob.text();
FileReader
の他のメソッドを使用することで、Blob の内容を文字列またはデータ URL として読み込むことができます。
仕様書
Specification |
---|
File API # blob-section |
ブラウザーの互換性
BCD tables only load in the browser