在图像上添加动态文本

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());  
});

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

Answer 1

您可以尝试以下方法:

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

希望它有用.