タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。(未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
![Canvasで描画した画像を送信してサーバに保存する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2db0cb7b8f67eeefcf75580c56758b4e29c00c41/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q2FudmFzJUUzJTgxJUE3JUU2JThGJThGJUU3JTk0JUJCJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTk0JUJCJUU1JTgzJThGJUUzJTgyJTkyJUU5JTgwJTgxJUU0JUJGJUExJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgxJUFCJUU0JUJGJTlEJUU1JUFEJTk4JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iN2E2YjY4ZTRiODVmNmJiY2FkOGI1YzZhZGI2NmEwNQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDAwODI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNWUwNmQ4MGNjYmE1NGM3MjA2ZjBjNjdlZTk1Nzg0Yw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df3a1fb57a3b12e56811dd2d3a8158170)