如何根据用户文本输入在我的网站上生成图像？

Question

我上次问这个问题时，它与另一个不准确的问题合并。澄清一下，我想让网站生成一个全新的、统一的图像。不是将一个元素叠加在另一个元素上，而是实际创建一个有凝聚力的 .png。

我正在做的项目是一个网站，它将根据书名生成图像。我有一系列输入字段（您的姓名、作者、书籍、引用），我希望将用户的输入编辑到图像上。图片不是由用户上传的（它是从预先确定的列表中随机选择的）。

该项目的下一步是自动将输出图像发布到社交媒体，但我只是想弄清楚如何处理图像。

我是网页设计的新手，所以到目前为止我的知识是通过 Reddit 和 w3schools（惊人的资源）获得的。

类似于我正在寻找的输出：Example

Answer 1

不完全是一个直接的答案，但您可以查看 Javascript 和 HTML5 Canvas 来实现这一点。

示例：https://chenmu10.github.io/memeGenerator/

您也可以在https://www.cssscript.com/responsive-meme-generator/ 下载演示代码并查看。

仅供参考，我不是这个项目的所有者。