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を使用する必要があります：あなたのコードは次のようになります。どのような種類のフレームワークを使用するかによって、すばらしいシェルスクリプトを書く必要があります。

OR

あなたはこれをチェックすることができます：Amaanによって提案

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> 

Cufonは、アップフロントフォントのクライアント側のバージョンを生成します。つまり、ImageMagickのように、Webサーバー上にイメージを生成する代わりに、静的ファイルをWebサーバーに追加するだけです。