Question

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

Answer 1

您可以使用隐藏的画布元素并使用toDataURL将其转换为图像来执行此操作。您的代码看起来像这样：

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
// Text input element
document.getElementById('textInput').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);

Demo

Answer 2

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

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

<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预先生成字体的客户端版本。这意味着它只是在您的Web服务器上添加静态文件，而不是在Web服务器上生成图像（与ImageMagick一样）。

Answer 3

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

OR

你可以看看：

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

使用javascript将文本转换为图像

3 个答案: