使用现有的背景图像和文本在JavaScript中创建图像以安全为php在php

Question

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

1. 我将文本添加到这将是一个普通的HTML表单的一部分的文字区域。

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

3. 当表单被取消后，脚本应该运行一个循环并将文本保存在不同背景上的文件夹中。

这里的输出应该是什么样子

有我的计划的一部分，我知道如何找出一个例子。但是有两件事我坚持不懈。

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

2. 如何从背景图像和一些文本上创建图像。

是否有人有对如何处理这一点的想法？或者，甚至可能使用完整的工作脚本？

Answer 1

我不知道有一种方法可以在PHP中进行这种图像生成。你为它标记了Javascript，所以我假设你有一个前端。

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

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

将文本到容器

有在要测量的文本将有多大的空间在其当前字体大小占用画布的方法。但是，当有可用的垂直空间时，这不会包装文本，而是将其全部放在一行上。一个更好的解决办法是有一个固定的字体大小和多条线路在<textarea>或多个<input> S，允许在下面的堆栈溢出线程讨论你适合文本：

Size to fit font on a canvas

保存图像到文件

退房此线程：Save canvas as jpg to desktop

老实说，毕竟这一点，我会说这将是更容易建立自动化的任何照片编辑器一点点你用。例如，Photoshop中的模板PSD。