Window: createImageBitmap() メソッド

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.

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

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

構文

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

引数

image

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

sx

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

sy

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

sw

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

sh

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のいずれかです、

返値

指定された長方形のビットマップデータを保持するImageBitmap オブジェクトに解決するPromise を返します。

例

スプライトシートからのスプライト作成

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

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

canvas {  border: 2px solid green;}

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";