HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ

canvas 要素の画像ファイル化

HTML5 の canvas 要素は画像として保存することができます。

デモを jsdo.it に投稿したので、合わせてご覧ください。

• Save as Image File - Colorful Lines - 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入門サイトを用意していますので、あわせて参照くださいませ。