createImageBitmap()方法

该createImageBitmap方法存在于window和worker的全局中。它接受各种不同的图像源，并返回一个解决ImageBitmap的Promise。可以选择将源裁剪为源自（sx，sy）的像素矩形，其宽度为sw，高度为sh。

createImageBitmap方法语法

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

参数

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。

返回值

一个Promise，它解析为包含给定矩形的位图数据的ImageBitmap对象。

createImageBitmap()方法示例

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

image.onload = function() {
  Promise.all([
    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';

规范

浏览器兼容性

新的兼容性表格处于测试阶段