キャンバス（Canvas）データをHTML5で画像ファイルとして保存する方法

キャンバスとは何か

キャンバス（Canvas）とは、HTMLページ上に確保される長方形の描画領域のことです。この領域に対して、JavaScriptを利用することで自由に図形やグラフィックを描画できます。

HTML5では、キャンバスは以下のように記述して作成します。

<canvas id="canvas1" width="250" height="150"></canvas>

このコードを実行すると、幅250px・高さ150pxの空のキャンバス（canvas1）が生成されます。なお、キャンバスはあくまで描画領域を定義するだけで、この時点では何も表示されません。

JavaScriptでキャンバスに図形を描画する

作成したキャンバスに実際に図形を描くには、JavaScriptを使用します。基本的な流れは以下の通りです。

var canvas = document.getElementById("canvas1");
var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0, 0);
ctx1.lineTo(300, 200);
ctx1.stroke(); // コンテキストオブジェクトの設定に基づいて実際に描画を行うメソッド

まずgetElementByIdでキャンバス要素を取得し、getContext("2d")メソッドによって2D描画用のコンテキストオブジェクトを取得します。その後、moveTo()やlineTo()でパスを定義し、stroke()を呼び出すことで、実際に線が描画されます。

描画したキャンバスを画像ファイルとして保存する

描画したグラフィックをファイルとして保存するには、キャンバスの内容をデータURL形式（img.png や img.jpg など）に変換する必要があります。

そのために使用するのが、toDataURL()メソッドです。

var imgurl = canvas.toDataURL(); // キャンバスの内容をPNG形式のデータURLとして取得
document.getElementById("cimg").src = imgurl; // img要素のsrcにデータURLを設定し、画像として保存できるようにする

toDataURL()メソッドを引数なしで呼び出すと、キャンバスの内容がPNG形式のデータURLに変換されます。引数に"image/jpeg"などを指定すれば、JPEG形式で出力することも可能です。

このデータURLを<img>要素のsrc属性に設定すれば、ブラウザ上に画像として表示でき、ユーザーは右クリックから保存したり、ダウンロードリンクを生成して保存したりできます。

まとめ

このように、HTML5のキャンバスに描画したデータは、toDataURL()メソッドを使ってデータURLに変換し、それを画像要素に設定することで、PNGやJPEGなどの画像ファイルとして簡単に保存することができます。キャンバスの内容を動的に画像化したい場合に非常に便利な手法なので、ぜひ活用してみてください。