2010年12月26日

サーバサイドでCanvasを利用する(node.js)

asial

Pocket

こんにちは、中川です。

今年も残すところあと１週間をきりましたね。
このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。

さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。

それでは、早速使ってみましょう。

■今回の環境

Ubuntu 10.10
node.js v0.3.1
npm 0.2.12-1
node-canvas v0.4.1

■インストール

node-canvasでは、cairoを利用しますので、事前にインストールします。


$ sudo apt-get install libcairo2-dev

その後、npmでインストール可能です。


$ npm install canvas

■動作確認
それでは、サンプルをちょっといじって実行してみましょう。


// sample.js
var Canvas = require('canvas')
  , http = require('http');
http.createServer(function (req, res) {
  var canvas = new Canvas(200,200);
  var ctx = canvas.getContext('2d');
  // 四角形描画
  ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
  ctx.fillRect(10, 10, 190, 190);
  
  // テキスト描画
  var text = "Canvas Test";
  ctx.font = '30px Impact';
  ctx.rotate(.1);
  ctx.fillStyle = 'rgba(0, 0, 0, 1.0)';
  ctx.fillText(text, 10, 100);
  // アンダーライン描画
  var te = ctx.measureText(text);
  ctx.strokeStyle = 'rgba(0,0,0,0.5)';
  ctx.beginPath();
  ctx.lineTo(50, 102);
  ctx.lineTo(50 + te.width, 102);
  ctx.stroke();
  // 出力
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<a href="https://www.asial.co.jp' + canvas.toDataURL() + ' &mode=1" class="popupimg"><img src="https://www.asial.co.jp' + canvas.toDataURL() + '"></a>');
}).listen(3000);

実行します。


$ node sample.js

http://localhost:3000/ にアクセスすると、以下のような画像が表示されます。

上記サンプルでは、 Canvas#toDataURL() を利用して、base64形式で表示していますが、Canvas#createPNGStream() を使ってpng画像を生成することも可能なようです。
※いまいち私の環境ではpng書き出しがうまく動かなかったので、今回添付している画像はすべてtoDataURLでの結果の画面キャプチャとなっています。。

JavaScriptのキャンバスを使ったライブラリは色々とありますので、
それらを利用してサーバ側で画像の生成が簡単に行えそうですね。

下記の参考URL内でも紹介されておりますが、flotという、グラフライブラリもHTMLやjQuery依存部分を少々改造すれば動かすことができました。
flot付属のサンプルデータを元に何個か変更しつつ動かしてみたら以下のような感じで動作確認できました。
※flotでは、判例や目盛りはHTML表示でしたので、Canvasでの表示に強引に変更しました。