HTML5キャンバスをPNG画像として保存・ダウンロードする方法

HTML5キャンバスをPNGファイルに変換する手順

HTML5の<canvas>要素で描画した内容をPNG画像として保存するには、以下の手順に従ってください。

基本的な仕組みは、canvas.toDataURL()メソッドで生成したデータURLを、<a>タグのhref属性に設定することです。

1. base64形式の画像データを扱う

toDataURL()で生成されるのは、base64エンコードされた画像データです。次のような形式になります。

<img src="data:image/png;base64,iOBVRw0KGgoAAAANSUhEUg...." class="image" />

2. ダウンロード用のファイル名を指定する

<a>タグにdownload属性を追加すると、クリック時に画像がダウンロードされます。属性値にファイル名を指定しましょう。

<a download="newimg.png" href="...">画像を保存</a>

3. HTTPヘッダーを定義する（サーバー側で処理する場合）

サーバーサイドでダウンロードを制御したい場合は、Content-Dispositionヘッダーを使用します。

headers=Content-Disposition: attachment; filename=newimg.png

4. ブラウザのメモリ使用量を抑える工夫

大きな画像を扱う場合、ブラウザのRAMへの負担を軽減するために、データURLは必要なタイミングで動的に生成するのがおすすめです。以下のように、クリックイベント発生時にデータURLを作成することで、無駄なメモリ消費を防げます。

// クリック時にデータURLを動的に生成
function myCanvas() {
    var d = canvas.toDataURL('image/png');
    this.href = d;
};
d.addEventListener('click', myCanvas, false);

まとめ

このように、toDataURL()とdownload属性を組み合わせるだけで、JavaScriptのみでキャンバスの内容をPNGファイルとして簡単に保存できます。サーバーへの通信も不要なので、クライアントサイドで完結する軽量な実装が可能です。