javascript 在图像上添加动态文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11502308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding dynamic text on image
提问by Dark Knight
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.
我正在为用户创建一个网站，他们可以在其中创建自定义徽标。为此，我需要一个工具来从用户将填写的文本框中添加动态文本，然后文本应出现在所选图像上。有没有什么办法，比如说对于 Javascript，我可以通过它来实现上述场景？非常感谢我如何做到这一点的任何建议。
My HTML so far is:
到目前为止，我的 HTML 是：
<html>
<body>
<input type="text" id="submit"/>
<img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />
</body>
and my jQuery:
和我的 jQuery：
$('#submit').change(function() {
$('#toChange').text( $('#submit').val());
});
but I haven't been succeed so far.
但到目前为止我还没有成功。
回答by 18bytes
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
- 使用 HTML5 Canvas 渲染图像示例：http: //www.html5canvastutorials.com/tutorials/html5-canvas-images/
- 在渲染的图像之上，使用 HTML5 Canvas API 使用所需的字体属性绘制您想要的文本参考：https: //developer.mozilla.org/en/Drawing_text_using_a_canvas
Hope its useful.
希望它有用。
