javascript - 画像に動的テキストを追加する

Question

カスタマイズしたロゴを作成できるユーザー向けのウェブサイトを作成しています。このために、ユーザーが入力するテキストボックスから動的テキストを追加する機能が必要です。テキストは選択した画像に表示されます。上記のシナリオを実行できる方法はありますか？私がこれを行う方法の提案をいただければ幸いです。

これまでの私のHTMLは次のとおりです。

<html>
  <body>
   <input type="text" id="submit"/>
   <img src=<?php echo $image; ?> id="toChange" alt="pic" width="60" height="60" />
  </body>

と私のjQuery：

$('#submit').change(function() {
   $('#toChange').text( $('#submit').val());  
});

しかし、私は今のところ成功していません。

score 10 · Accepted Answer

次のことを試すことができます。

HTML5 Canvasを使用して画像をレンダリングします例：http ：//www.html5canvastutorials.com/tutorials/html5-canvas-images/
レンダリングされた画像の上に、HTML5 Canvas APIを使用して、必要なフォント属性で必要なテキストを描画します。リファレンス：https ：//developer.mozilla.org/en/Drawing_text_using_a_canvas

その有用性を願っています。

1 に答える 1