Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

clockmaker
ウェブ制作会社ICSの代表および ics.media 編集長をやっています。得意分野はプログラミングアート、インタラクティブ表現の制作。詳しくはリンク先を御覧ください。 https://ics.media/entry/author/ikeda
http://clockmaker.jp/labs/
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした