29

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

4

3 回答 3

66

您可以使用隐藏的画布元素执行此操作，并使用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>
​</p>

演示

于 2012-09-08T07:02:09.693 回答
2

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

过去，最常见的解决方案是使用像Cufon这样的库。来自关于其用法的 Cufon wiki 页面来自以下片段：

<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）。

于 2012-09-08T12:13:48.997 回答
1

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

或者

你可以看看这个：

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

于 2012-09-08T07:15:59.397 回答