入力テキストを画像に変換する方法はありますか?私が正確にしようとしているのは、テキストをテキストボックスに入力してdivに表示することです。ボタンをクリックすると、divにコピーされたテキストを画像に変更する必要があります。 Any1はこれについて何でも知っている??前もって感謝します!javascriptを使用してテキストを画像に変換する
13
A
答えて
29
これは、非表示のキャンバス要素を使用して、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);
0
あなたは、サーバー側でのImageMagickを使用する必要があります:あなたのコードは次のようになります。どのような種類のフレームワークを使用するかによって、すばらしいシェルスクリプトを書く必要があります。
OR
あなたはこれをチェックすることができます:Amaanによって提案
1
キャンバスアプローチは間違いなく、画像にクライアント側を生成するために、今日のアプローチです。
これまでの最も一般的な解決策は、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サーバーに追加するだけです。
関連する問題
- 1. JavaScriptを使用してローカル画像をbase64に変換する
- 2. jqueryを使ってテキストを画像に変換するには?
- 3. IValueConverterを使用してバインドされたテキストを画像に変換する
- 4. テキストを画像に変換する
- 5. JavaScriptを使用してテキストをピクセル座標に変換する
- 6. javascriptを使用してマウスの画像上にテキストを表示
- 7. PDFBoxを使用して画像をバイト[]に変換する
- 8. IEでjavascriptのCSS変換を使用して画像を回転する
- 9. テキストをCSSでJavaScriptを使ってJavaScriptに変換する
- 10. capybaraを使用して画像をbase64に変換
- 11. PDFをテキストなしの画像に変換する方法
- 12. PHPを使用してビデオテンプレートをカスタム画像/テキストに置き換える方法
- 13. Kinetic.js html5 canvasを使用して画像上にテキストを置き換える
- 14. 変換マップを使用したOpenCV2変換画像
- 15. javascriptを使用してテキストでテキストを置き換える
- 16. 画像をテキストに変換し、アンドロイドのテキストメッセージとして送信する方法
- 17. .binを画像係数に変換し、MATLABとCを使用してバイナリ画像を作成する
- 18. ABCpdfはテキストを画像に変換します
- 19. テキストを画像メッセージに変換しますか?
- 20. JavascriptまたはPHPを使用してイメージをテキストに変換しますか?
- 21. Kinect 1.0 SDKを使用してぼかし画像をRGB画像に変換する
- 22. pdfsharpを使用して複数の画像をpdfに変換する
- 23. LIBAVCODECを使用してRAW RAW画像バッファをJPEGに変換する
- 24. Aforge.Netを使用してグレースケール画像を白黒に変換する
- 25. ImageMagickを使用してPDFファイルを画像ファイルに変換する方法
- 26. iTextSharpを使用して画像のみをPDFに変換する
- 27. ogr2ogrを使用してS57チャートをPNG画像に変換する方法
- 28. JavaScript/jqueryを使用してクリップボードに画像をコピーする
- 29. Javascriptを使用してPicasaに画像を投稿するXMLHttpRequest
- 30. htmlテキストをPHPで画像に変換する
ここではサーバーサイドのアクションが必要です。 ImageMagickおそらく... – Lix
テキストを配置することによってイメージ上にテキストを書くことができます... – Aravind
[何を試しましたか](http://mattgemmell.com/2008/12/08/what-have-you-tried /)。 – FallenAngel