OffscreenCanvas: convertToBlob() メソッド

Baseline 2023 *

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

メモ: この機能はウェブワーカー内で利用可能です。

OffscreenCanvas.convertToBlob() メソッドは、このキャンバスに含まれる画像を表す Blob オブジェクトを作成します。

希望するファイル形式と画質を指定することができます。ファイル形式が指定されていない場合、または指定された形式に対応していない場合、データは image/png としてエクスポートされます。ブラウザーは image/png に対応している必要があります。多くのブラウザーは、image/jpeg や image/webp などの他の形式にも対応しています。

作成される画像には、エンコード解像度メタデータに対応しているファイル形式の場合、96dpi の解像度が指定されます。

構文

convertToBlob()
convertToBlob(options)

引数

options 省略可

以下のプロパティを持つオブジェクトです。

type: 画像形式を示す文字列。既定の型は image/png です。指定した型に対応していない場合も、この画像形式が使用されます。
quality: 0 と 1 の間の数値で、非可逆圧縮に対応しているファイル形式（image/jpeg や image/webp など）を使用して画像を作成する際に使用する画質を示します。このオプションが指定されていない場合、または数値が許容範囲外の場合、ユーザーエージェントは既定の品質値を使用します。

返値

キャンバスに含まれている画像を Blob オブジェクトとして返すプロミス (Promise) です。

例外

プロミスは、次の例外を除き、拒否される場合があります。

InvalidStateError DOMException: OffscreenCanvas は切り離されていません。言い換えれば、それはまだ DOM に関連付けられており、現在のワーカーには関連付けられていません。
SecurityError DOMException: キャンバスのコンテキストモードは 2d で、このビットマップはオリジンがクリーンではありません。少なくともそのコンテンツの一部は、文書自体が読み込まれたサイト以外のサイトから読み込まれた、あるいは読み込まれた可能性があるからです。
IndexSizeError DOMException: キャンバスビットマップにはピクセルは存在しません（水平方向および垂直方向の寸法はいずれも 0 です）。
EncodingError DOMException: エンコードエラーのため、blob を作成できませんでした。

例

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// gl コンテキストを使用して描画を実行します。

offscreen.convertToBlob().then((blob) => console.log(blob));
// Blob { size: 334, type: "image/png" }

仕様書

Specification
HTML # dom-offscreencanvas-converttoblob-dev

OffscreenCanvas: convertToBlob() メソッド

構文

引数

返値

例外

例

仕様書

ブラウザーの互換性

関連情報