WindowOrWorkerGlobalScope接口方法：createImageBitmap()

createImageBitmap()方法

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

createImageBitmap()方法語(yǔ)法

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

createImageBitmap()方法參數(shù)

image

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

sx

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

sy

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

sw

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

sh

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

可選的選項(xiàng)

為其設(shè)置選項(xiàng)的對(duì)象。可用的選項(xiàng)是：

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

createImageBitmap()方法返回值

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

createImageBitmap()方法示例

以下是一個(gè)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)換為機(jī)器可讀的JSON格式。

• 電腦端

• 移動(dòng)端

注釋：

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