DOM

：

：

Window.createImageBitmap() メソッド

　編集：2022.09.13 by T.A.

[Edge]？。→、

Windows または Worker の指定されたソースからビットマップを作成し、ImageBitmap に解決される Promise で返します。

このメソッドは、さまざまな異なる画像ソースを受け付けます。

構文
Window.createImageBitmap(image[, options])
Window.createImageBitmap(image, sx, sy, sw, sh[, options])
Window Window または Worker オブジェクト。
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';
テスト