在 JavaScript 中创建 GIF 和 PNG

Posted 2023-03-25

【中文标题】在 JavaScript 中创建 GIF 和 PNG

【英文标题】：Creating GIFs and PNGs in JavaScript

【发布时间】：2021-12-22 18:17:24

【问题描述】：

我是一名平面设计师，想要创建一个应用程序，该应用程序采用图形资源并创建与资源相结合的图形。

示例：我有一个怪物的 3 个头、3 个身体和 3 个武器，我想创建所有可能的组合，乘以配色方案，然后导出为 PNG 或 GIF 文件。

我学习 JS 已经有一段时间了，我想在 Electron 中创建这种应用程序，但是我很难找到有关 JS 中图像处理的学习资源。我在堆栈上查看了here，但许多类似的问题来自〜2009，它们引用了不存在的MDN文档。

你能给我建议一个方向吗？我找到了一些关于 html 画布处理的教程，但它们大多在 JPG 上应用了过滤器。

【参考方案1】：

查看这个库：html2canvas

只需选择您组合的容器，它就可以完成这项工作。

html2canvas(document.body).then(function(canvas) 
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
);