Window：createImageBitmap() 方法
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年9月.
* Some parts of this feature may have varying levels of support.
Window 接口的 createImageBitmap 从给定的来源创建位图，也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源，并返回一个会兑现 ImageBitmap 的 Promise。
语法
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 通道预乘。以下值之一：
none、premultiply或default（默认）。 colorSpaceConversion-
指定图像是否应使用色彩空间转换进行解码。
none或default（默认）。default值表示使用特定于实现的行为。 resizeWidth-
指定输出宽度的长整数。
resizeHeight-
指定输出高度的长整数。
resizeQuality-
指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：
pixelated、low（默认）、medium或high。
返回值
一个 Promise，会兑现为一个包含给定矩形的位图数据的 ImageBitmap 对象。
示例
通过精灵表创建精灵
此示例加载精灵表（sprite sheet），从中提取精灵，然后将每个精灵渲染到画布上。精灵表是包含多个较小图像（你希望能够单独渲染每个图像）的图像。
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 |
浏览器兼容性
Loading…