Window: createImageBitmap() メソッド

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

構文

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

引数

image

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

• HTMLImageElement
• SVGImageElement
• HTMLVideoElement
• HTMLCanvasElement
• Blob
• ImageData
• ImageBitmap
• OffscreenCanvas
• VideoFrame

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 id="myCanvas"></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";

仕様書

ブラウザーの互換性

関連情報

• WorkerGlobalScope.createImageBitmap()
• CanvasRenderingContext2D.drawImage()
• ImageData