使用javascript將文本轉換爲圖像

Question

有什麼辦法可以將輸入文本轉換爲圖像。我正在嘗試做的是在文本框中輸入一些文本並將其顯示在div上。當我點擊按鈕時，複製到div的文本應該更改爲圖像。 Any1知道這件事？提前致謝！

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

您需要使用ImageMagick的在你的服務器端。根據您使用的框架類型，您可能需要編寫一些漂亮的shell腳本。

OR

你可以看看這個：

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

Answer 3

通過建議阿曼恩畫布的做法絕對是今天的方式生成圖像客戶端。

在過去，最常見的解決方案是使用像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> 

的Cufón產生字體的前期的客戶端版本。這意味着它只是在您的Web服務器上添加靜態文件，而不是在Web服務器上生成圖像（就像ImageMagick一樣）。