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

Question

我在facebook上拥有一些粉丝，我发布了包含有趣文字的图片（如下例所示）。在所有页面中，我使用相同的文本，但使用不同的背景图像。背景的大小始终相同。只有颜色变化。由于我必须单独使用不同的背景保存每张图片，我现在正在尝试创建一个小脚本，允许我将具有不同背景的创建文本存储为jpg或png文件。以下是我想象的过程：

1. 我会将文本添加到textarea，这将是普通html表单的一部分。

2. 使用javascript我想在下面示例的白色边框内拟合文本（字体大小，宽度和高度）。

3. 当表单被提交时，脚本应该循环运行并将文本保存在单独文件夹中的每个不同背景上。

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



我的计划中有一部分我知道如何弄明白。但是我坚持了两件事。

1. 如何调整文本以使其适合样本图像的白色边框？

2. 如何从背景图片中创建图像，并在其上创建一些文字。

有人知道如何处理这个问题吗？或者甚至是一个我可以使用的完全可用的脚本？

Answer 1

我不确定是否有办法在PHP中进行此类图像生成。你把它标记为Javascript所以我假设你有一个前端。

我即将推荐类似FitText.js的内容，但为了将您的工作保存为图片文件，您需要使用Canvas API。它有一个toDataUrl('image/jpeg')方法。

您可以使用canvasCtx.drawImage创建图像背景。一个canvasCtx.strokeRect来创建一个有边框的矩形。并canvasCtx.fillText绘制文字。

使文本适合容器

画布中有一个方法可以测量文本在当前字体大小上占用的空间大小。但是，当有可用的垂直空间时，不会将文本换行，而是将其全部放在一行上。一个更好的解决方案是在<textarea>或多个<input>中拥有固定的字体大小和多行，允许您按照以下堆栈溢出线程中的讨论来拟合文本：

Size to fit font on a canvas

将图像保存到文件

查看此主题：Save canvas as jpg to desktop

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