是否可以通过将文本作为查询参数传递给图像 URL 来在图像上添加文本？答案

【问题标题】：Is it possible to add text over an image by passing the text as a query parameter to the image URL?是否可以通过将文本作为查询参数传递给图像 URL 来在图像上添加文本？
【发布时间】：2021-05-14 16:36:04
【问题描述】：

我能够在 HTML 中的图像上添加文本，或者通过使用后端中的库在页面呈现之前在图像上附加文本。

我想知道是否可以在图像上添加文本并在页面在前端呈现时从传递给图像 URL 的查询参数创建一个新图像？

另外，我还需要通过电子邮件发送相同的图像，我想当我发送电子邮件时前端解决方案可能会变得复杂。

更新：我在网上找到了一个工具，它完全符合我的需要 - https://imagekit.io/

知道他们如何能够如此快速地绘制文本吗？

【问题讨论】：

标签： javascript image

【解决方案1】：

你可以同时使用：

后端选项更直接。在您的编程语言（php、node.js 等）中，您初始化一个空图像，然后从 get 参数中复制所需的图像，然后从 get 参数中添加文本，然后输出图像内容。这应该是一个控制器目标并直接链接到它
对于客户端选项，您可以使用 JS 在图像上添加 data-test 属性，或者如果不可能，然后使用正则表达式从 url 中提取它。

const image = document.getElementById('img')
img.textContent = img.dataset.text

#img {
  display: grid;
  width: 300px;
  height: 200px;
  color: #FFF;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-size: cover;
  justify-content: center;
  align-content: center;
}

&lt;div id="img" style="background-image: url(https://image.shutterstock.com/shutterstock/photos/1960131820/display_1500/stock-photo-sunset-at-coast-of-the-lake-nature-landscape-nature-in-northern-europe-reflection-blue-sky-and-1960131820.jpg)" data-text="Nice Sunset"&gt;&lt;/div&gt;

【讨论】：

我还需要通过电子邮件发送相同的图像。我想我忘了在问题中提到这一点。会更新的。
在这种情况下，后端解决方案是唯一可行的解决方案，因为电子邮件中的 html 支持很差。检查此答案以获取 node.js 解决方案stackoverflow.com/a/59365344/13817884