Window：createImageBitmap() 方法

image

图像源，可以是以下值之一：

• HTMLImageElement
• SVGImageElement
• HTMLVideoElement
• HTMLCanvasElement
• Blob
• ImageData
• ImageBitmap
• OffscreenCanvas
• VideoFrame

sx

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

sy

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

sw

将从中提取 ImageBitmap 的矩形的宽度。此值可以为负数。

sh

将从中提取 ImageBitmap 的矩形的高度。此值可以为负数。

options 可选

设置图像提取选项的对象。可用的选项包括：

imageOrientation

指定位图图像的方向。

from-image

如果存在 EXIF 方向元数据，则根据其来指定图像方向（默认）。

flipY

如果存在 EXIF 方向元数据，则根据其来指定图像方向，然后垂直翻转。

none

根据图像的编码来指定图像方向，忽略有关方向的任何元数据（例如，可能添加到图像中的 EXIF 元数据，以指示相机被转向以在人像模式下捕获图像）。

premultiplyAlpha

指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一：none、premultiply 或 default（默认）。

colorSpaceConversion

指定图像是否应使用色彩空间转换进行解码。none 或 default（默认）。default 值表示使用特定于实现的行为。

resizeWidth

指定输出宽度的长整数。

resizeHeight

指定输出高度的长整数。

resizeQuality

指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：pixelated、low（默认）、medium 或 high。

一个 Promise，会兑现为一个包含给定矩形的位图数据的 ImageBitmap 对象。

此示例加载精灵表（sprite sheet），从中提取精灵，然后将每个精灵渲染到画布上。精灵表是包含多个较小图像（你希望能够单独渲染每个图像）的图像。

原图像：<img src="50x50.jpg" />
<hr />
<canvas id="myCanvas"></canvas>

canvas {
  border: 2px solid green;
}

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

// 等待精灵表加载完成
image.onload = () => {
  Promise.all([
    // 从精灵表中裁剪出两个精灵
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
  ]).then((sprites) => {
    // 将每个精灵绘制到画布上
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
    ctx.drawImage(sprites[2], 64, 64);
  });
};

// 从图像文件加载精灵表
image.src = "50x50.jpg";

• WorkerGlobalScope.createImageBitmap()
• CanvasRenderingContext2D.drawImage()
• ImageData