Javascript 修改&；导出PNG
不久前，我创建了一个小系统，它允许人们选择各种图片用于论坛签名，所有这些图片都是为了组合在一起而设计的（见下面的示例图片）。目前，这是通过一系列图像来实现的，这些图像通过它们的名称、它们所在的文件夹以及图像名称中的后缀来引用 我想创建一个系统，在那里人们可以修改他们想要的所有内容。我试着寻找一些不同的方法来做这件事，但是没有找到任何能够实现我在这里的目标的方法 原始图像在Photoshop中制作，并根据横幅的类型分为各个层。理想情况下，我想制作一个系统，允许人们修改颜色（RGB、滑块等），通过一组预设图标或上传自己的图标来更改图标，并能够修改图像上的文本 说到底，我希望图像片段可以下载，这样它们就不会存储在服务器端。此外，我希望这样做，而不必导出所有可能的变体，因为它目前的工作方式已经很麻烦了 TL；博士： 用户是否可以修改一组参数来更改颜色、图标或文本，然后将结果下载为PNG？代码类型不重要，我愿意学习，只想知道正确的方向 这里有一个当前代码的下载供感兴趣的人使用 示例图像（忽略白线）：Javascript 修改&；导出PNG,javascript,image,photoshop,Javascript,Image,Photoshop,不久前，我创建了一个小系统，它允许人们选择各种图片用于论坛签名，所有这些图片都是为了组合在一起而设计的（见下面的示例图片）。目前，这是通过一系列图像来实现的，这些图像通过它们的名称、它们所在的文件夹以及图像名称中的后缀来引用 我想创建一个系统，在那里人们可以修改他们想要的所有内容。我试着寻找一些不同的方法来做这件事，但是没有找到任何能够实现我在这里的目标的方法 原始图像在Photoshop中制作，并根据横幅的类型分为各个层。理想情况下，我想制作一个系统，允许人们修改颜色（RGB、滑块等），通过一
似乎每个横幅都有四层：横幅、图标、文本和可选内容 保存各个层并通过前端的javascript组装它们。将零件排列为精灵图纸可能使在Photoshop中编辑和以编程方式组装更加方便 当用户想要下载结果时，向后端发送装配说明，让后端将零件装配成图像，并提供图像供下载
与其在Photoshop中手动组装每个可能性，不如让系统按需组装。似乎每个横幅都有四层：横幅、图标、文本和可选内容 保存各个层并通过前端的javascript组装它们。将零件排列为精灵图纸可能使在Photoshop中编辑和以编程方式组装更加方便 当用户想要下载结果时，向后端发送装配说明，让后端将零件装配成图像，并提供图像供下载
不是在Photoshop中手动组装每个可能性，而是让系统按需组装。我实际上做过类似的事情。您需要在HTML中使用
canvas函数来绘制用户想要的东西。这些图像/功能
s应放在您的画布
中，以便用户预览其图片和更改内容的控件集
这将向您展示如何从画布
获取png。我建议您应该有一个保存按钮，用户在其中完成图片，然后将图片发送到服务器，并将其存储在那里。下载功能将下载该图片
我的做法有所不同。我使用了canvas
作为预览，当用户完成设置时，这些设置被作为JSON发送到服务器，最后的图片被放在一起 我确实做过类似的事情。您需要在HTML中使用canvas
，并拥有有限数量的可能图像或一些Javascript函数来绘制用户想要的东西。这些图像/功能
s应放在您的画布
中，以便用户预览其图片和更改内容的控件集
这将向您展示如何从画布
获取png。我建议您应该有一个保存按钮，用户在其中完成图片，然后将图片发送到服务器，并将其存储在那里。下载功能将下载该图片
我的做法有所不同。我使用了canvas
作为预览，当用户完成设置时，这些设置被作为JSON发送到服务器，最后的图片被放在一起 我就这些问题进行了讨论，但是在这种情况下，如何让系统从PSD组装和导出图像？此外，是否可以用这种方法修改横幅的文字和颜色？最后，对于这种类型的系统，什么是最佳的代码？@Korvic他们必须是平面图像。直接从PSD开始是不可行的。假设您有可用的字体，修改文本是可行的。修改横幅的颜色将取决于您想要的修改类型。如果横幅为灰色，则覆盖纯色透明颜色将使其着色。如果您希望边框条带为不同的基色，则意味着需要另一层。这不是一个容易转换的系统，因为这是一个端到端的策略，您已经构建了所有东西，但我相信一旦完成，生活会简单得多。@Korvic重新安排PSD也会使导出到sprite表更容易。@Korvic实际上没有这样的最佳语言（如果我正确解释您的问题的话）。你也可以坚持你已经使用过的东西。我已经讨论过这些问题，但是在这种情况下，如何让系统从PSD组装和导出图像？此外，是否可以用这种方法修改横幅的文字和颜色？最后，对于这种类型的系统，最佳的代码是什么