有没有办法在不使用画布的情况下在 JavaScript 中合并图像？

Posted 2023-03-25

【中文标题】有没有办法在不使用画布的情况下在 JavaScript 中合并图像？

【英文标题】：Is there a way to merge images in JavaScript without using canvas?

【发布时间】：2021-08-12 18:13:26

【问题描述】：

我正在尝试导出大于the maximum canvas size 的图像 (PNG)。我已经平铺了画布导出，以便每个平铺都足够小以生成（使用toBlob）。现在我需要一种将图像合并在一起的方法，但找不到一种本身不使用画布的方法。这有可能吗？

【问题讨论】：

是的，您可以使用PNG encoder (untested)，从您的图块中构建您自己的 ImageData，这样就可以了。

【参考方案1】：

Kaiido 的回答效果很好。我正在使用getImageData 平铺画布导出（移动每个图块的画布内容），然后遍历所有 ImageData 图块并创建一个新的 RGBA 值数组，并将其发送到fast-png 的encode .它不是很快，尤其是在移动设备上（在 iPhone X 上合并约 30MP 图像大约需要 40 秒），但我是在后台线程上使用 Worker 进行的。