在图像上添加动态文本 [英] Adding dynamic text on image
本文介绍了在图像上添加动态文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为用户创建自定义徽标的网站。为此，我需要一个工具来添加用户填写的文本框中的动态文本，然后文本应显示在所选图像上。有没有办法，对于Javascript来说，我可以通过哪种方式来满足上述情况？感谢任何关于我如何做到这一点的建议。
我的HTML到目前为止是：
< HTML>
< body>
< input type =textid =submit/>
< img src =<？php echo $ image; ？> id =toChangealt =picwidth =60height =60/>
< / body>
和我的jQuery： p（$（$（$）
$ $ $ $ $（'＃submit'）。val（））;
}）;
但是目前为止还没有成功。
解决方案
您可以尝试以下操作：
- 使用HTML5 Canvas渲染图像示例： http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
- 在渲染图像之上，使用HTML5 Canvas API使用所需的字体属性绘制所需的文本参考： https://developer.mozilla.org/en/Drawing_text_using_a_canvas
希望它有用。 >
I'm making a website for users where they can creat customize logos. For this I need a facility to add dynamic text from text boxes which the user will fill in and the text should then appear on the the selected image. Is there any way, say for Javascript, through which I can fulfill the above scenario? Would appreciate any suggestions of how i could do this.
My HTML so far is:
<html>
<body>
<input type="text" id="submit"/>
<img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />
</body>
and my jQuery:
$('#submit').change(function() {
$('#toChange').text( $('#submit').val());
});
but I haven't been succeed so far.
解决方案
You can try the following:
- Use HTML5 Canvas to render your image Example: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
- On top of the rendered image use the HTML5 Canvas API to draw the text you want with the required font attributes Reference: https://developer.mozilla.org/en/Drawing_text_using_a_canvas
Hope its useful.
这篇关于在图像上添加动态文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
