修改＆amp;导出PNG

Question

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

我想创建一个可以根据需要修改这些内容的系统。我尝试了几种不同的方法来做到这一点，但是没有成功找到任何可以做我想做的事情。

原始图像在Photoshop中制作，并根据横幅的类型分成单独的图层。理想情况下，我喜欢制作一个系统，允许人们修改颜色（RGB，滑块，类似的东西），通过一组预设图标或上传自己的图标来更改图标，以及修改图标的能力图片上的文字。

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

TL; DR： 有没有办法用户可以修改一组参数来更改颜色，图标或文本，然后将结果下载为PNG？代码类型没关系，我愿意学习，只想知道正确的方向。

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

https://dl.dropboxusercontent.com/u/90098446/website.zip

示例图像（忽略白线）：

Answer 1

似乎每个横幅都有四层：横幅，图标，文字和可选的眼泪。

保存各个图层并通过前端的javascript进行组合。将部件排列为精灵表可以使这在Photoshop中进行编辑和以编程方式进行组装更加方便。

当用户想要下载结果时，将程序集的描述发送到后端，让后端将部件组合成图像，并提供图像供下载。

不是手动组装Photoshop中的每种可能性，而是让系统按需组装它。

Answer 2

我实际上做过这样的事情。您需要在HTML中使用canvas并拥有有限数量的可能图像，或者可能需要一些Javascript function来绘制用户想要的内容。这些图片/ function应该放在canvas中，以便用户可以预览他的图片和控件集以更改内容。

此SO post向您展示了如何从canvas获取png。我建议您应该有一个保存按钮，用户可以在其中完成图片，这应该将图片发送到服务器，然后存储它。下载功能应该下载该图片。

我的做法不同。我使用canvas作为预览，当用户最终确定设置时，这些设置作为JSON发送到服务器，最终图片放在一起。