在图像上添加动态文本

我正在为用户创建一个网站，以便他们可以创建自定义徽标。为此，我需要一个工具来添加用户填写的文本框中的动态文本，然后文本应该显示在选定的图像上。有没有什么办法，比如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()); 
});

，但我一直没到目前为止成功。

来源

2012-07-16 Dark Knight

如果您使用PHP生成图像，则必须将文本框值传递给脚本，然后重新加载生成的图像。您可以使用AJAX调用来发送文本并接收图像的新URL。 – Alex 2012-07-16 10:19:03

你的意思是你想要文字出现在图像上，或者实际上保存为一个文件，并且上面有文字？ JavaScript不能做后者 - 你需要像[PHP GD]（http://www.php.net/gd） – Utkanos 2012-07-16 10:19:54

啊，你想要做的事情就像[** www.cooltext.com ** ]（http://www.cooltext.com）。 – arttronics 2012-07-16 10:23:36

你可以尝试以下方法：

使用HTML5画布渲染你的形象的例子：http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
在渲染图像使用HTML5的Canvas API绘制你想要的文字与所需的字体的顶部属性参考：https://developer.mozilla.org/en/Drawing_text_using_a_canvas

希望它有用。

来源

2012-07-16 10:20:58 18bytes

所有优点 - 但OP想要保存带有文本的图像文件，我想。 – Utkanos 2012-07-16 10:42:03

@Utkanos和user1528490您可以将Canvas上下文另存为图像文件。示例：http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/。希望能帮助到你！ – 18bytes 2012-07-16 12:16:08

关于保存并下载画布作为图像，看看这里：http://jsfiddle.net/softvar/5hnyf/ – Kurtis92 2016-02-26 12:06:07

在图像上添加动态文本

回答

相关问题