self.createImageBitmap()

createImageBitmap() メソッドは、指定されたソースからビットマップを作成します。このメソッドは、windows と worker の両方のグローバルスコープに存在します。このメソッドは、さまざまな異なる画像ソースを受け付け、Promise を返し、ImageBitmap に解決します。

const imageBitmapPromise = createImageBitmap(image[, options]);
const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);

image

画像ソースで <img>、SVG <image>、<video>、<canvas>、HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、Blob、ImageData、ImageBitmap または OffscreenCanvas オブジェクトのいずれかになります。

sx

ImageBitmap が抽出される矩形の参照点の x 座標。

sy

ImageBitmap が抽出される矩形の参照点の y 座標。

sw

ImageBitmap が抽出される矩形の幅。この値は負の値にすることができます。

sh

ImageBitmap が抽出される矩形の高さ。この値は負の値にすることができます。

options 省略可

画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。

• imageOrientation: 画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。none (デフォルト) または flipY のいずれかを指定します
• premultiplyAlpha: ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。none、premultiply、default (デフォルト) のいずれかです
• colorSpaceConversion: 画像を色空間変換でデコードするかどうかを指定します。none または default (デフォルト) のいずれかを指定します。値 default は、実装固有の動作を使用することを示します
• resizeWidth: 出力幅を示す long 整数
• resizeHeight: 出力の高さを示す long 整数
• resizeQuality: 出力寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。pixelated、low (デフォルト)、medium、highのいずれかです

与えられた矩形のビットマップデータを含むImageBitmap オブジェクトに解決するPromise を返します。

この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();

// スプライトシートがロードされるのを待ちます
image.onload = function() {
  Promise.all([
    // スプライトシートから2つのスプライトを切り取ります
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32)
  ]).then(function(sprites) {
    // 各スプライトをキャンバスに描きます
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}

// 画像ファイルからスプライトシートを読み込みます
image.src = 'sprites.png';

• CanvasRenderingContext2D.drawImage()
• ImageData