html - HTML5キャンバスを使用して画像にテキストを追加するにはどうすればよいですか？

Question

HTML5を使用して画像にテキストを追加したい。これはどのように行うことができますか？

Answer 1

画像をキャンバスにロードし（を使用drawImage()）、次にキャンバスにテキストを描画します（を使用fillText()）。

必要に応じて、を使用してキャンバスから画像データをtoDataUrl()取得し、そのデータをサーバーに送信して画像を永続化できます。

クライアント側の可視性のためだけに必要な場合は、html5を使用しないはるかに単純なソリューションがあります。絶対位置を使用して画像にテキストをオーバーレイするだけです。