HTML5キャンバスのデータをファイルに保存する方法

HTML5キャンバスのデータをPNGファイルとして保存する方法

Node.js環境でHTML5キャンバス（node-canvas）の描画内容をファイルに保存するには、PNGStreamを利用するのが最も簡単な方法です。canvasオブジェクトのpngStream()メソッドを使うことで、キャンバスの内容をPNG形式のストリームとして取得し、ファイルに書き出すことができます。

以下のコードは、キャンバスの内容を「text.png」というファイルに保存する基本的な例です。

var f = require('fs')
  , out = f.createWriteStream(__dirname + '/text.png')
  , stream = canvas.pngStream();

stream.on('data', function(chunk){
    out.write(chunk);
});

stream.on('end', function(){
    console.log('PNG Saved successfully!');
});

コードの解説

1. ファイルストリームの作成
require('fs')でファイルシステムモジュールを読み込み、createWriteStream()で出力先となるPNGファイルへの書き込みストリームを作成します。ここでは実行ディレクトリ直下の「text.png」に出力しています。

2. PNGストリームの生成
canvas.pngStream()を呼び出すと、キャンバスの描画内容がPNGデータとして順次流れる読み取りストリームが返されます。

3. データの受信と書き込み
'data'イベントが発生するたびにチャンク（データの断片）を受け取り、out.write(chunk)でファイルへ書き込みます。

4. 完了処理
すべてのデータの書き出しが完了すると'end'イベントが発火し、コンソールに保存完了のメッセージが出力されます。

この手法を使えば、サーバーサイドで動的に生成したグラフや図形などを手軽にPNGファイルとして永続化できます。なお、JPEG形式で保存したい場合は、同様にjpegStream()メソッドを利用することも可能です。