-1

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

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

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

第 2 步：文本出现在图像上的某个位置。

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

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

4

3 回答 3

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>
于 2013-01-01T10:01:23.143 回答
0

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

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

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

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

于 2013-01-01T09:33:29.297 回答
0

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

canvas.drawImage(image, dx, dy)

然后您可以在某个位置以相同的字体绘制文本。在这里，您可以找到有关画布的更多信息以及有关使用它的教程。

于 2013-01-01T09:34:28.603 回答