使用javascript中现有的背景图像和文本创建图像，以便在php中作为jpg安全。

Question

我在facebook上有几个粉丝页面，在其中我发布了包含有趣文本的图片(如下面的例子)。在所有页面中，我使用相同的文本，但背景图像不同。背景的大小总是一样的。只有颜色会变。由于我必须以不同的背景分别保存每幅图片，所以我现在尝试创建一个小脚本，允许我将具有不同背景的创建文本存储为jpg或png文件。下面是我对这个过程的设想：

1. 我会将文本添加到文本区域，这将是普通html表单的一部分。
2. 使用javascript，我想将文本(字体大小、宽度和高度)放在下面示例的白色边框中。
3. 当表单被提交时，脚本应该通过一个循环运行，并将文本保存在每个不同的背景上，放在一个单独的文件夹中。

下面是输出应该是什么样子的示例

​

​

我的计划有些地方我知道怎么弄清楚。但是有两件事我被困住了。

1. 如何调整文本以使其适合示例图像的白色边框？
2. 我如何创建一个图像的背景图像和一些文本之上。

有没有人知道如何处理这件事？或者甚至是我可以用的一个完全工作的脚本？

Answer 1

我不确定是否有一种方法可以在PHP中实现这种图像生成。你贴上了Javascript的标签，所以我想你有一个前端。

我正要提出类似FitText.js的建议，但为了将您的工作保存为图像文件，您需要使用Canvas。它有一个toDataUrl('image/jpeg')方法。

您可以使用canvasCtx.drawImage创建图像背景。创建具有边框的矩形的canvasCtx.strokeRect。和canvasCtx.fillText绘制文本。

将文本与容器相匹配

在画布中有一种测量文本在当前字体大小下将占用多少空间的方法。然而，当有可用的垂直空间时，这不会包装文本，而是将其放在一行上。一个更好的解决方案是在一个<textarea>或多个<input>中有固定的字体大小和多行，这样您就可以像下面的堆栈溢出线程中所讨论的那样适合文本：

适用于画布上字体的大小

将图像保存到文件

查看这个线程：将画布保存为jpg到桌面

老实说，在所有这一切之后，我想说在你使用的任何照片编辑器中设置一点点自动化会更容易。例如，Photoshop中的一个模板PSD。