使用jQuery将文本插入图像

Question

我现在已经搜索了几个小时，我似乎仍然无法找到一个漂亮的jquery插件（或其他任何东西），这可以帮助我将文本插入到图片中。

我不希望文字“覆盖”图像。我希望文本成为图像的一部分。我将用它在网上制作激励/消极的海报。除了文字问题，我也想不出办法使黑色“填充”。

如果你能给我一些关于如何解决这个问题的建议或提示，我将非常感激。谢谢！

Answer 1

jquery用于UI处理 - 在浏览器中处理用户界面级别的事物。您应该在服务器端创建所需内容 - 例如使用PHPs imagemagick库

Answer 2

您将无法使用javascript编辑图像。您可能必须使用某种服务器端语言进行图像编辑。

Answer 3

如果您有良好的HTML5支持，可以使用Canvas元素。

您可以使用：

ctx.drawImage(img, dx, dy);

将<img>标签的内容呈现在指定偏移处的画布上（为了给你一个边框），并且：

ctx.fillText(...);

在顶部添加您自己的文字。

请参阅W3C spec。

如果您没有HTML5，则必须在服务器端完成。

Answer 4

看看Raphaël。您可能需要动态加载图像并创建新图像作为输出。

否则，HTML 5将是一个选项，或者其他人提到的服务器端解决方案。