fbisのブックマーク / 2021年8月5日 - はてなブックマーク

fbis id:fbis

2021年8月5日のブックマーク (2件)

Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
fbis 2021/08/05
javascript
リンク
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する実行例ソース HTML JavaScript PHP 解説 Canvasを画像として取り出すサーバへ送信するサーバでバイナリとして保存する参考ページ Canvasの内容をサーバへ送信する実行例以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
fbis 2021/08/05
php

javascript
リンク
- 2021年8月10日
- 2021年8月5日
- 2021年8月4日