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';
仕様
仕様書 | ステータス | コメント |
---|---|---|
HTML Living Standard createImageBitmap の定義 |
現行の標準 |
ブラウザの互換性
BCD tables only load in the browser