Window: createImageBitmap() メソッド

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年9月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

createImageBitmap() は Window インターフェイスのメソッドで、指定されたソースからビットマップを作成し、オプションでそのソースの一部のみを切り抜きます。このメソッドは、さまざまな画像ソースを受け付け、 ImageBitmap に解決する Promise を返します。

構文

js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)

引数

image

画像ソースで、以下のうちの何れかです。

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

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

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

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

options 省略可

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

imageOrientation

画像をどの方向に向けるかを指定します。

from-image

EXIF 方向メタデータが存在する場合、その方向に従って画像を表示します（既定値）。

flipY

Image oriented according to EXIF orientation metadata, if present, and then flipped vertically.

none

画像のエンコード方式に従って画像の方向を調整し、方向に関するメタデータ（EXIF メタデータなど、画像を縦向きで撮影するためにカメラを横向きにしたことを示すために画像に追加される場合のあるメタデータ）は無視します。

premultiplyAlpha

ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。 none、premultiply、default （既定値）のいずれかです。

colorSpaceConversion

画像を色空間変換でデコードするかどうかを指定します。 none または default （既定値）のいずれかを指定します。値 default は、実装固有の動作を使用することを示します。

resizeWidth

出力幅を示す long 整数です。

resizeHeight

出力の高さを示す long 整数です。

resizeQuality

出力する寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。pixelated、low （既定値）medium、highのいずれかです、

元の画像:
<img src="50x50.jpg" />
<hr />
<canvas id="myCanvas"></canvas>

canvas {
  border: 2px solid green;
}

js
const canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

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

// 画像ファイルからスプライトシートを読み込みます
image.src = "50x50.jpg";