表单字段上输入的文本显示在图像上

时间:2013-01-01 09:25:01

标签: php javascript jquery image forms

以多种不同的方式尝试谷歌搜索,但我还没有找到解决方案。很抱歉没有任何代码可以提前使用。

这就是我想象的......

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

第2步:文字显示在某个位置的图片上。

例如,图片是“我的名字是 _ _ ”字样的图片。 “安德鲁”这个词会出现在空白处。

第3步:用户可以将图片下载为.png

3 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

您可以使用canvas html5元素来实现此目的。有了它,您可以在画布中加载现有图像

canvas.drawImage(image, dx, dy)

然后您可以在特定位置以相同的字体绘制文本。您可以在此处找到有关使用canvastutorial的更多信息。

答案 2 :(得分:0)

    <!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>