javascript - 如何使用 src（裁剪）编辑 javascript 图像对象的 x1 y1 x2 y2

Question

我基本上是在尝试将图像（spritesheet）拆分成一堆帧。为此，我想使用原始图像，然后选择原始图像的x1，x2，y1和y2来获取每一帧。这可以使用图像对象在纯javascript中完成吗？

在伪代码中：

const frame1 = new Image();
frame1.src = path;
frame1.x1 = 0;
frame1.y1 = 0;
frame1.x2 = 20;
frame1.y2 = 20;
const frame2 = new Image();
frame2.src = path;
frame2.x1 = 20;
frame2.y1 = 0;
frame2.x2 = 40;
frame2.y2 = 20;

标签： javascript

Answer 1

我发现了一个名为的函数createImageBitmap()，它可以在不使用画布的情况下轻松裁剪图像对象。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap