Widely available すべての主要ブラウザで対応済み。安心して使用可能。

ImageBitmapRenderingContext

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

ImageBitmapRenderingContext インターフェイスは、キャンバスのレンダリングコンテキストで、指定された ImageBitmap でキャンバスのコンテンツを置き換える機能を提供します。そのコンテキスト ID（HTMLCanvasElement.getContext() または OffscreenCanvas.getContext() の最初の引数）は "bitmaprenderer" です。

このインターフェイスは、ウィンドウとワーカーコンテキストの両方で利用できます。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ImageBitmapRenderingContext
66
79
46
11.1
66
11.3
getContext (bitmaprenderer context)

ビットマップレンダラ`コンテキスト
66
79
46
11.1
66
11.3
getContext (bitmaprenderer context options alpha parameter)

options.alpha`パラメータ
66
79
11.1
66
11.3
canvas

Canvas API の一部である ImageBitmapRenderingContext.canvas プロパティは、特定のコンテキストに関連付けられた HTMLCanvasElement または OffscreenCanvas オブジェクトへの読み取り専用の参照です。
66
79
97
11.1
66
11.3
transferFromImageBitmap

ImageBitmapRenderingContext.transferFromImageBitmap() メソッドは、指定された ImageBitmap をこのレンダリングコンテキストに関連付けられたキャンバスで表示します。ImageBitmap の所有権はキャンバスにも移譲されます。
66
79
50
11.1
66
11.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (52)
対応条件
  • 以前は別名で対応していました: transferImageBitmap (46)

基本構文

JAVASCRIPT 
const ctx = canvas.getContext('bitmaprenderer');
const response = await fetch('image.png');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
ctx.transferFromImageBitmap(bitmap);

ライブデモ

Bitmap renderer preview

Transfer an ImageBitmap into a canvas that uses the bitmaprenderer context.

プレビュー全画面表示

Swap bitmaps

Create new bitmaps on demand and replace the currently displayed frame.

プレビュー全画面表示

Bitmap status card

Report support state and keep a visible bitmap preview in sync.

プレビュー全画面表示

実務での使いどころ

  • ImageBitmapRenderingContext の活用

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

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク