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 对象，其中包含来自给定矩形的位图数据。

此示例加载精灵表，提取单个精灵，然后将每个精灵渲染到画布上。精灵表是一个图像，其中包含多个较小的图像，您希望能够分别渲染这些图像。

Original image:
<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();

// Wait for the sprite sheet to load
image.onload = () => {
  Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
  ]).then((sprites) => {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
    ctx.drawImage(sprites[2], 64, 64);
  });
};

// Load the sprite sheet from an image file
image.src = "50x50.jpg";

• CanvasRenderingContext2D.drawImage()
• ImageData