使用JavaScript将文本转换为图像

Question

有没有办法将输入的文本转换为图像？我要做的事情是在文本框中键入一些文本，并在div上显示它。当我单击按钮时，复制到div的文本应更改为图像。有人知道这方面的任何信息吗？提前致谢！

- Shab

---

你可能需要一些服务器端的操作，比如 ImageMagick... - Lix

您可以通过定位文本来在图像上书写您的文本... - Aravindhan

你尝试过什么？（http://mattgemmell.com/2008/12/08/what-have-you-tried/） - FallenAngel

@Solutioner，那个问题是关于PHP的，不是JavaScript。 - Anderson Green

Answer 1

您可以使用隐藏的canvas元素并使用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>

​

演示

- Some Guy

---

帮了个忙，谢谢。剩下的事情我自己会解决的。 :) - Shab

Answer 2

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

过去，最常用的解决方案是使用类似于Cufon的库。从 Cufon的维基页面上关于它的使用中可以看到以下代码：

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

- Frank van Puffelen

Answer 3

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

或者您可以查看这个：

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

- K-man