WindowOrWorkerGlobalScope接口方法：createImageBitmap()

createImageBitmap()方法

該createImageBitmap方法存在于全局的窗口和 worker 中。它接受各種不同的圖像源，并返回一個解析為 ImageBitmap 的 Promise。可選地，源被剪裁成源自（sx，sy）且寬度為 sw 和高度為 sh 的像素的矩形。

createImageBitmap()方法語法

createImageBitmap(image[, options]).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });

createImageBitmap()方法參數(shù)

image

圖像源，其可以是一個<img>，SVG <image>，<video>，<canvas>，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，  Blob，ImageData，ImageBitmap，或OffscreenCanvas對象。

sx

要從中提取 ImageBitmap 的矩形的參照點的 x 坐標(biāo)。

sy

將從中提取 ImageBitmap 的矩形的參考點的 y 坐標(biāo)。

sw

將從中提取 ImageBitmap 的矩形的寬度。該值可能是負(fù)值。

sh

將從中提取 ImageBitmap 的矩形的高度。該值可能是負(fù)值。

可選的選項

為其設(shè)置選項的對象?？捎玫倪x項是：

• imageOrientation：指示圖像是按原樣呈現(xiàn)還是垂直翻轉(zhuǎn)?？梢允?code>none（默認(rèn)）也可以是flipY。
• premultiplyAlpha：表示位圖顏色通道由 alpha 通道預(yù)乘?？梢哉f其中之一：none，premultiply或default（默認(rèn)）。
• colorSpaceConversion：指示圖像是否使用顏色空間轉(zhuǎn)換進(jìn)行解碼。可以是none或者default（默認(rèn)）。該值default表示使用了特定于實現(xiàn)的行為。
• resizeWidth：表示新寬度的長整數(shù)。
• resizeHeight：一個長整數(shù)，表示新的高度。
• resizeQuality：指定圖像縮放算法?？梢允瞧渲兄唬?code>pixelated，low（默認(rèn)）medium，或high。

createImageBitmap()方法返回值

createImageBitmap()方法返回一個 Promise，它解析為包含給定矩形中的位圖數(shù)據(jù)的 ImageBitmap 對象。

createImageBitmap()方法示例

以下是一個createImageBitmap()方法的使用示例：

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();

image.onload = function() {
  Promise.all([
    createImageBitmap(this, 0, 0, 32, 32),
    createImageBitmap(this, 32, 0, 32, 32)
  ]).then(function(sprites) {
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}

image.src = 'sprites.png';

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機器可讀的JSON格式。

• 電腦端

• 移動端

注釋：

[1] createImageBitmap() 現(xiàn)在在 WindowOrWorkerGlobalScope mixin 上定義。