29

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

4

3 に答える 3

66

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

デモ

于 2012-09-08T07:02:09.693 に答える
2

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 サーバーに静的ファイルを追加するだけであることを意味します。

于 2012-09-08T12:13:48.997 に答える