批量创建 + 编辑图像

Question

我目前使用 Photoshop + 数据集自动创建 CTA 按钮以在客户网站上进行测试。数据集通常包含文本和其他更改，例如下划线或背景颜色，以及对齐方式和字体格式。

通常这些可以达到数千个，Photoshop 处理得很好，但任务是技术性的，而不是图形化的。对我来说，photoshop 对于这项任务来说太过分了。

是否有人知道对代码更友好的解决方案？我目前正在使用 HTML 和 fabric.js 上的画布。这允许我操作 template 图像，并且我希望我可以通过管道输入代码来创建许多 .png 输出图像。

Answer 1

Canvas 非常适合您的自动化

首先，创建一个基础 .png，然后以数千种方式以编程方式对其进行更改。

将结果保存到适当命名的 .png 文件中。

您甚至可以创建一个动态创建数千种变化的屏幕查看器。客户端可以浏览动态创建的图像并选择他们感兴趣的变化。这样就不需要保存数千个文件了。

这里只是你可以用来自动化的画布命令的开始：

应用文字：

context.font("italic 14pt Verdana");
context.textAlign = textAlign;              // left|right|center
context.fillText("anyText", x,y);

下划线有点复杂：

// use measureText to get the text width
var textWidth =context.measureText(text).width;    
// 1-time only, pre-calculate all the “Y” underline offsets for each font you use
var ULOffset=lookupULOffset(font,fontSize);
context.moveTo(x,y+ULOffset);
context.lineTo(textWidth,y+ULOffset);
context.stroke();

更改背景颜色或您为其创建子层的任何其他颜色！

就像 Photoshop Canvas 有一套出色的合成操作。

• 源头
• 来源
• 源出
• 源头
• 打火机
• 异或
• 目的地
• 目的地
• 目的地
• 目的地顶部
• 较暗（由于某种原因已被弃用？？）

您还可以在绘制图层时应用 Alpha，以及在绘制任何画布形状时应用 Alpha。

此外，请在线查看为画布创建的许多图像过滤器。

而这才刚刚开始……

祝自动化愉快！