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

希望它有用。