katsube https://blog.hatena.ne.jp/katsube/ ねこの足跡R https://blog.katsubemakito.net/ HTML5 PHP JavaScript canvas base64 DataURISchema FetchAPI toDataURL() Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.katsubemakito.net%2Fhtml5%2Fcanvas-sendserver" title=" [HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/katsube/20231125/20231125045644.png Hatena Blog https://hatena.blog 2020-02-27 00:40:02 rich https://blog.katsubemakito.net/html5/canvas-sendserver 1.0 100%