Window:createImageBitmap() 方法

Window 接口的 createImageBitmap 从给定的来源创建位图,也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源,并返回一个会兑现 ImageBitmapPromise

语法

js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)

参数

image

图像源,可以是以下值之一:

sx

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

sy

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

sw

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

sh

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

options 可选

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

imageOrientation

指定位图图像的方向。

from-image

如果存在 EXIF 方向元数据,则根据其来指定图像方向(默认)。

flipY

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

none

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

premultiplyAlpha

指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一:nonepremultiplydefault(默认)。

colorSpaceConversion

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

resizeWidth

指定输出宽度的长整数。

resizeHeight

指定输出高度的长整数。

resizeQuality

指定用于调整输入大小以匹配输出尺寸的算法。以下值之一:pixelatedlow(默认)、mediumhigh

返回值

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

示例

通过精灵表创建精灵

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

js
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";

规范

Specification
HTML
# dom-createimagebitmap-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
createImageBitmap
options.colorSpaceConversion parameter
options.imageOrientation parameter
Value from-image
Value none
ExperimentalNon-standard
options.premultiplyAlpha parameter
options.resizeHeight parameter
options.resizeQuality parameter
options.resizeWidth parameter
SVGImageElement as source image

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

参见