canvas 要素の画像ファイル化
HTML5 の canvas 要素は画像として保存することができます。
デモを jsdo.it に投稿したので、合わせてご覧ください。
JPEG 画像へ変換する方法
canvas変数は、document.getElementById("ほげほげ")で取得したcanvas要素の参照です。toDataURL()メソッドの引数に変換したい種別を指定することで、その画像形式に対応した文字列(Base64方式の画像)を戻り値として受け取れます。
const data = canvas.toDataURL("image/jpeg");
JPEG 画像は背景色を透過できませんので用途が限られるでしょう。
PNG 画像へ変換する方法
PNG 形式であれば、背景色を透過して保存できます。可逆圧縮となるので画質の劣化もありません。
const data = canvas.toDataURL("image/png");
WebP 画像へ変換する方法
Google Chrome 限定ですが WebP 形式(ウェブピーではなく、ウェッピーと読みます)の保存にも対応しています。WebP は新しい画像形式だけあって、JPEGやPNGと比べても容量が小さくなります。ただし、二番目の引数で画質調整をうまくしてやらないと画質がすぐに劣化するので注意が必要です。WebP 形式でも、背景色を透過して保存できます。
const data = canvas.toDataURL("image/webp");
番外編 : SVG
SVG 画像にも対応していたら面白いと思ったのですが、残念ながら現状はどのブラウザも対応していないようです。
const data = canvas.toDataURL("image/svg+xml");
ただし、CreateJSの機能「EaselJS/extras/SVGExporter at master · CreateJS/EaselJS」を使えば、Canvas要素をSVG画像として保存することができます。CreateJSすごい！
今回はプレーンな JS で制御しましたが、HTML5 Canvas を制御するならCreateJSがオススメです。日本語のCreateJS入門サイトを用意していますので、あわせて参照くださいませ。