在图片上添加动态文本

Question

9

我正在为用户制作一个网站，他们可以创建定制的标志。为此，我需要添加一个设施，从文本框中添加动态文本，用户将填写该文本，然后文本应出现在所选图像上。是否有任何方式，比如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());  
});

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

- Dark Knight

如果您正在使用PHP生成图像，则必须将文本框的值传递给脚本，然后重新加载生成的图像。您可以使用AJAX调用发送文本并接收新图像URL。 - Alex

你的意思是想让文本出现在图片上，还是将带有文本的图片保存为文件？JavaScript无法做到后者 - 你需要像PHP GD这样的东西。 - Mitya

1

啊，你想做类似于www.cooltext.com的东西。 - arttronics

@Utkanos 是的，我关心后者的情况。这与图像处理有关吗？ - Dark Knight

是的 - 您将不得不在服务器上处理图像以及文字的叠加，使用类似GD的东西。如果可以接受，请回复，我将发布一篇显示如何完成此操作的答案（尽管稍后会发布）。 - Mitya

@Utkanos - 我想这对我来说是可以接受的。 - Dark Knight

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 18bytes · Accepted Answer

您可以尝试以下方法：

使用HTML5 Canvas渲染您的图像，例如：http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
在渲染的图像上方使用HTML5 Canvas API以所需的字体属性绘制所需的文本。参考：https://developer.mozilla.org/en/Drawing_text_using_a_canvas

希望对您有用。