javascript - 修改和导出 PNG

<分区>

关闭。这个问题需要details or clarity .它目前不接受答案。

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 6 年前。

不久前，我创建了一个小型系统，允许人们选择各种图像以用于论坛签名，这些图像都被设计成可以组合在一起(参见下面的示例图像)。目前，这是通过使用一系列图像来完成的，这些图像通过名称、它们所在的文件夹以及图像名称中的后缀来引用。

我想创建一个系统，人们可以在其中随意修改这些内容。我尝试寻找几种不同的方法来做到这一点，但未能找到任何能够实现我在这里的目标的方法。

原始图像是在 Photoshop 中制作的，并根据横幅的类型分成单独的图层。理想情况下，我很想制作一个系统，允许修改颜色(RGB、 slider 等)，通过一组预设图标或上传自己的图标来更改图标，以及修改文本的能力图片。

总而言之，我希望图像片段可以下载，这样它们就不会存储在服务器端。此外，我想在不必导出所有可能的变体的情况下执行此操作，因为这已经对当前的处理方式造成了麻烦。

长话短说: 有什么方法可以让用户修改一组参数来更改颜色、图标或文本，然后将结果下载为 PNG 格式？代码类型无所谓，我愿意学习，只是想知道正确的方向。

这里是任何感兴趣的人的当前代码的下载。

示例图片(忽略白线):

最佳答案

似乎每个横幅都有四层:横幅、图标、文本和可选的眼泪。

保存各个层并在前端通过 javascript 组装它们。将部件排列为 sprite 表可能会使在 Photoshop 中编辑和以编程方式组装更加方便。

当用户想要下载结果时，向后端发送组装描述，让后端将零件组装成图片，并提供图片供下载。

您无需在 Photoshop 中手动组装每种可能性，而是让系统按需组装。

关于javascript - 修改和导出 PNG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40168418/

相关文章：

javascript - 防止在 fabricjs 中保存状态悬停