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>HTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementBlobImageDataImageBitmap または OffscreenCanvas オブジェクトのいずれかになります。
sx
ImageBitmap が抽出される矩形の参照点の x 座標。
sy
ImageBitmap が抽出される矩形の参照点の y 座標。
sw
ImageBitmap が抽出される矩形の幅。この値は負の値にすることができます。
sh
ImageBitmap が抽出される矩形の高さ。この値は負の値にすることができます。
options Optional
画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。
  • imageOrientation: 画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。none (デフォルト) または flipY のいずれかを指定します
  • premultiplyAlpha: ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。nonepremultiplydefault (デフォルト) のいずれかです
  • colorSpaceConversion: 画像を色空間変換でデコードするかどうかを指定します。none または default (デフォルト) のいずれかを指定します。値 default は、実装固有の動作を使用することを示します
  • resizeWidth: 出力幅を示す long 整数
  • resizeHeight: 出力の高さを示す long 整数
  • resizeQuality: 出力寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。pixelatedlow (デフォルト)、mediumhighのいずれかです

戻り値

与えられた矩形のビットマップデータを含む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 の定義
現行の標準

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
createImageBitmapChrome 完全対応 50Edge 完全対応 79Firefox 完全対応 52
補足
完全対応 52
補足
補足 createImageBitmap() now defined on WindowOrWorkerGlobalScope mixin.
完全対応 42
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 50Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 5.0
options parameterChrome 完全対応 52Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 39Safari 未対応 なしWebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS ? Samsung Internet Android 完全対応 6.0
resizeWidth, resizeHeight, and resizeQualityChrome 完全対応 54Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 6.0
SVGImageElement as source imageChrome 完全対応 59Edge 完全対応 79Firefox 完全対応 65IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android 完全対応 65Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

あわせて参照