修改并导出PNG

前一段时间，我创建了一个小型系统，允许用户选择各种图像用于论坛签名，这些图像都是为了适合在一起而设计的（请参见下面的示例图像）。目前，这是通过获取一系列图像来完成的，这些图像通过名称，它们所在的文件夹以及图像名称中的后缀进行引用。修改并导出PNG

我想创建一个系统，可以修改所有他们想要的。我尝试着查找几种不同的方法来做到这一点，但是找不到任何能够做到我打算在这里做的事情的方式。

原始图像在Photoshop中制作，并根据横幅的类型分成单独的图层。理想情况下，我很想制作一个允许修改颜色（RGB，滑块等）的系统，通过一组预设图标更改图标或上传自己的图标，并且可以修改文本图像。

毕竟说完了，我想图像片可下载，所以他们不存储在服务器端。另外，我想这样做，而不必导出每一个可能的变体，因为这对目前的处理方式已经是一种麻烦了。

TL; DR：用户可以通过修改一组参数来更改颜色，图标或文本，然后将结果作为PNG下载吗？代码类型并不重要，我愿意学习，只是想知道正确的方向。

下面是对当前任何感兴趣的代码的下载。

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

示例图像（忽略白线）：

来源

2016-10-21 Korvic

好像每个横幅具有四层：旗帜，图标，文本，和任选的泪。

保存各个图层并在前端通过javascript组装它们。将这些部分排列为精灵表可能会更方便在Photoshop中进行编辑和以编程方式组装。

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

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

来源

2016-10-21 04:45:50 Ouroborus

我已经讨论了沿着这些线的东西，但是在这种情况下，如何让系统从PSD组装并导出图像？另外，能用这种方法修改横幅的文字和颜色吗？最后，用于这种类型的系统的最佳代码是什么？ – Korvic

@Korvic他们必须是平面图像。从PSD直接做起来并不可行。假设你有一个可用的字体，修改文本是可行的。修改横幅的颜色将取决于您想要进行哪种修改。如果横幅是灰色的，覆盖一个纯色的透明色将会给它们涂上色。如果你想边框条纹是不同的基色，那就意味着有另一个图层。这不是一个简单的转换系统，因为它是一种端到端的策略，而且你已经构建了所有的东西，但是我相信一旦完成，生活将变得简单得多。 – Ouroborus

@Korvic重新安排PSD会使导出到精灵表更容易。 – Ouroborus

我已经做了这样的事情。您需要在您的HTML中使用canvas，并且可以使用有限数量的可能图像，或者可能使用某些Javascript绘制用户想要的内容。这些图像/ function应放在您的canvas中，以使用户能够预览他的照片和控制集以更改内容。

这SO post告诉你如何从canvas得到一个PNG。我建议你应该有一个保存按钮，在那里用户完成图片，这应该发送图片到服务器，它将被存储在那里。下载功能应该下载该图片。

我已经做了不同的处理。我已经使用canvas作为预览，当用户完成设置时，将这些设置作为JSON发送到服务器，最终的图片放在一起。

来源

2016-10-21 07:46:21

修改并导出PNG

回答

相关问题