如何使用 JS 生成图像并利用其他图像？答案

【问题标题】：How can I generate an image using JS and utilizing other image?如何使用 JS 生成图像并利用其他图像？
【发布时间】：2010-11-06 15:08:33
【问题描述】：

我正在寻找一种方法来生成具有各种文本的图像，作为参数提供（包括指定的字体），并且我有另一个图像用作模板（某种背景）。如果可能的话，请帮助指出实现这一目标的方法。

【问题讨论】：

【解决方案1】：

使用canvas标签，见http://diveintohtml5.ep.io/canvas.html。

【讨论】：

实际上 JS 并没有提供适当的（满足我的需要）图像处理级别，即使画布有很多矢量图形（从 Raphael.js 判断）。无论如何，我的解决方案是服务器端 php 图像生成（在某种意义上“解开我的手臂”）。
Canvas 和 Raphael.js 没有任何关系。

【解决方案2】：

您可以使用画布或 SVG，后者在文本处理方面表现更好，因为它本机支持文本。我的意思是你可以在你的SVG文件中直接输入文本，而对于画布你必须以某种方式自己渲染文本AFAIK。您还可以将图像嵌入到 SVG 文件中。

作为旁注，您还可以使用 PHP 等服务器端语言来创建图像，以防您不知道。

【讨论】：

在画布中，您通常可以使用context.fillText("my text", x, y); 渲染文本。另请注意，SVG 允许您制作与分辨率无关的矢量图形，画布在像素推送方面表现出色。 Raphael.js 是一个不错的 SVG 包装库。