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()方法参数

image

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

sx

要从中提取 ImageBitmap 的矩形的参照点的 x 坐标。

sy

将从中提取 ImageBitmap 的矩形的参考点的 y 坐标。

sw

将从中提取 ImageBitmap 的矩形的宽度。该值可能是负值。

sh

将从中提取 ImageBitmap 的矩形的高度。该值可能是负值。

可选的选项

为其设置选项的对象。可用的选项是：

• imageOrientation：指示图像是按原样呈现还是垂直翻转。可以是none（默认）也可以是flipY。
• premultiplyAlpha：表示位图颜色通道由 alpha 通道预乘。可以说其中之一：none，premultiply或default（默认）。
• colorSpaceConversion：指示图像是否使用颜色空间转换进行解码。可以是none或者default（默认）。该值default表示使用了特定于实现的行为。
• resizeWidth：表示新宽度的长整数。
• resizeHeight：一个长整数，表示新的高度。
• resizeQuality：指定图像缩放算法。可以是其中之一：pixelated，low（默认）medium，或high。

createImageBitmap()方法返回值

createImageBitmap()方法返回一个 Promise，它解析为包含给定矩形中的位图数据的 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';

规范

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。

• 电脑端

• 移动端

注释：

[1] createImageBitmap() 现在在 WindowOrWorkerGlobalScope mixin 上定义。