Window: createImageBitmap() 方法
Baseline 广泛可用 *
Window 接口的 createImageBitmap() 方法从给定源创建位图，可以选择裁剪以仅包含该源的一部分。它接受各种不同的图像源，并返回一个解析为 ImageBitmap 的 Promise。
语法
js
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
参数
图片-
图像源，可以是以下任何一种
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 对象。
示例
从精灵表创建精灵
此示例加载一个精灵表，提取单个精灵，然后将每个精灵渲染到画布。精灵表是包含多个较小图像的图像，您希望能够单独渲染每个图像。
js
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";
规范
| 规范 |
|---|
| HTML # dom-createimagebitmap-dev |
浏览器兼容性
加载中…