使用javascript将文本转换为图像[关闭]答案

【问题标题】：Convert Text to Image using javascript [closed]使用javascript将文本转换为图像[关闭]
【发布时间】：2012-09-08 06:54:24
【问题描述】：

有什么方法可以将输入文本转换为图像。我真正想做的是在文本框中输入一些文本并将其显示在 div 上。当我单击按钮时，复制到 div 的文本应更改为图像。有人对这个有了解吗？提前致谢！

【问题讨论】：

您需要在此处执行一些服务器端操作。 ImageMagick 也许......
您可以通过定位文本在图像上写入文本...
What have you tried.
@Solutioner 这个问题是关于 PHP，而不是 JavaScript。

标签： javascript html text

【解决方案1】：

您可以使用隐藏的画布元素执行此操作，并使用toDataURL 将其转换为图像。您的代码将如下所示：

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
  
// Text input element
document.getElementById('text').addEventListener('keyup', function() {
  tCtx.canvas.width = tCtx.measureText(this.value).width;
  tCtx.fillText(this.value, 0, 10);
  imageElem.src = tCtx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

Demo

【讨论】：

帮助.. 谢谢。剩下的事情自己会弄清楚。 :)

【解决方案2】：

Amaan 建议的画布方法绝对是当今在客户端生成图像的方法。

过去，最常见的解决方案是使用像 Cufon 这样的库。来自Cufon wiki page on its usage的这个sn-p：

<script type="text/javascript">
    Cufon.replace('h1'); // Works without a selector engine
    Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
</script>

Cufon 会预先生成客户端版本的字体。这意味着它只是在您的网络服务器上添加静态文件，而不是在网络服务器上生成图像（如 ImageMagick）。

【讨论】：

【解决方案3】：

您需要在服务器端使用 ImageMagick。根据您使用的框架类型，您可能需要编写一些不错的 shell 脚本。

或

你可以看看这个：

http://www.blitline.com/docs/functions

【讨论】：