Javascript 在图像上添加动态文本_Javascript_Jquery_Html_Dynamic

Javascript 在图像上添加动态文本

javascript jquery html dynamic

Javascript 在图像上添加动态文本,javascript,jquery,html,dynamic,Javascript,Jquery,Html,Dynamic,我正在为用户创建一个网站，在那里他们可以创建自定义徽标。为此，我需要一个设施，以添加动态文本从文本框，用户将填写，然后文本应出现在选定的图像。比如说Javascript，有什么方法可以实现上述场景吗？如果您能给我一些建议，我将不胜感激到目前为止，我的HTML是： <html> <body> <input type="text" id="submit"/> <img src=<?php echo $image; ?> id="

我正在为用户创建一个网站，在那里他们可以创建自定义徽标。为此，我需要一个设施，以添加动态文本从文本框，用户将填写，然后文本应出现在选定的图像。比如说Javascript，有什么方法可以实现上述场景吗？如果您能给我一些建议，我将不胜感激

到目前为止，我的HTML是：

<html>
  <body>
   <input type="text" id="submit"/>
   <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />
  </body>

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

你可以尝试以下方法：

使用HTML5画布渲染图像示例：

在渲染图像的顶部，使用HTML5画布API使用所需的字体属性引用绘制所需的文本：

希望它有用。

如果使用PHP生成图像，则必须将文本框值传递给脚本，然后重新加载生成的图像。您可以使用AJAX调用发送文本并接收图像的新URL。您的意思是希望文本显示在图像上，或者实际将文本保存为一个文件并覆盖该文本？JavaScript不能做后者-你需要像啊，你想做那样的事情。@Utkanos是的，我关心后一种情况。这与图像处理有关吗？是的-您必须在服务器上通过类似GD的方式处理图像，并将文本叠加到图像上。如果这是可以接受的，请回复，我将发布一个答案，说明这是如何完成的（虽然今天晚些时候会发布），所有这些都是好的观点-但是OP希望保存带有文本的图像文件，我认为。@Utkanos和user1528490您可以将画布上下文保存为图像文件。这里的示例：。希望有帮助！关于将画布另存为图像并下载，请查看以下内容：

$('#submit').change(function() {
   $('#toChange').text( $('#submit').val());  
});