javascript - 在图像上添加动态文本

Question

我正在为用户创建一个网站，他们可以在其中创建自定义徽标。为此，我需要一种工具来从用户将填写的文本框中添加动态文本，然后文本应出现在所选图像上。有没有什么办法，比如说 Javascript，我可以通过它来实现上述场景？对于我如何做到这一点的任何建议，我将不胜感激。

到目前为止，我的 HTML 是：

<html>
  <body>
   <input type="text" id="submit"/>
   <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />
  </body>

和我的 jQuery：

$('#submit').change(function() {
   $('#toChange').text( $('#submit').val());  
});

但到目前为止我还没有成功。

score 10 · Accepted Answer

您可以尝试以下方法：

使用 HTML5 Canvas 呈现图像示例：http ://www.html5canvastutorials.com/tutorials/html5-canvas-images/
在渲染图像之上，使用 HTML5 Canvas API 使用所需的字体属性绘制所需的文本参考：https ://developer.mozilla.org/en/Drawing_text_using_a_canvas

希望它有用。

1 回答 1