web-dev-qa-db-ja.com

JavaScriptを使用してテキストを画像に変換する

入力テキストを画像に変換する方法はありますか？私が正確にしようとしていることは、テキストボックスにテキストを入力して、divに表示することです。ボタンをクリックすると、divにコピーされたテキストが画像に変更されます。誰かこれについて何か知っていますか？前もって感謝します！

javascripthtmltext
19
Shab

非表示のキャンバス要素を使用してこれを行うことができ、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);
​

デモ

42
Some Guy

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のようにWebサーバーで画像を生成するのではなく、Webサーバーに静的ファイルを追加するだけです。

1
Frank van Puffelen

サーバー側でImageMagickを使用する必要があります。使用するフレームワークの種類によっては、Nice Shellスクリプトをいくつか記述する必要があります。

OR

あなたはこれをチェックすることができます：

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

0
K-man