表单字段上输入的文本出现在图像上答案

【问题标题】：Entered text on form field appears on image表单字段上输入的文本出现在图像上
【发布时间】：2013-01-01 09:25:00
【问题描述】：

尝试以多种不同方式搜索此问题，但我无法找到解决此问题的方法。很抱歉没有任何代码可以提前使用。

这就是我的设想......

第 1 步：用户在文本字段中输入“Andrew”

第 2 步： 文字出现在图像的特定位置。

例如，图片是“我的名字是__”字样的图片。 “安德鲁”字样将出现在空白处。

第 3 步：用户可以将图像下载为 .png

【问题讨论】：

为什么要它作为图像？当然文字就足够了。但是，如果您坚持拥有图像，则必须让服务器即时创建它们。

标签： php javascript jquery image forms

【解决方案1】：

您可以通过使用 canvas html5 元素来实现这一点。有了它，您可以将现有图像加载到画布中

canvas.drawImage(image, dx, dy)

然后你可以在某个位置以相同的字体绘制文本。在这里你可以找到更多关于canvas 和tutorial 使用它的信息。

【讨论】：

【解决方案2】：

我总是在服务器端使用 imagemagick 进行图像处理

http://www.imagemagick.org/Usage/text/

如果您在服务器上没有 root 权限，您也可以使用 php 的图像功能

http://php.net/manual/en/function.imagestring.php

【讨论】：

【解决方案3】：

    <!DOCTYPE html>
    <html>
    <head><title></title></head>
    <script type="text/javascript">
    function move(params)
    {

   var txt = document.getElementById(params.id).value;
   alert(txt);
   var ele = document.getElementById("myimage");
   document.getElementById("myimage").innerHTML += txt;

   //set your corresponding position
   ele.style.position = 'absolute';
   ele.style.left     = 100+'px';
   ele.style.top      = 100+'px';
     }
     </script>
  <body>
  <input type="text" id="itext"/>
  <input type="button" id="ibutton" text="move" value="move"   onclick="move({id:'itext'});"/>
   <div id="myimage">sss</div>
  </body>
    </html>

【讨论】：