HTML5 の canvas をさわってみた
仕事をしている時、ちょっと QR コードが欲しくなったけれど、手軽に生成できるサイトが見つけられなかったので、HTML5 の練習も含めて作ってみることにしました。
作ったのはこんな感じ。
- Zebra
- http://qr.magicalhat.jp/
- github
- https://github.com/hatyuki/Zebra
テキストエリアに何か入力すると、それをリアルタイムで QR コードに変換してくれます。
たとえば般若心経を入力するとこんな QR コードが生成されます。誰得なんでしょうね。
って、何の変哲もない QR コードなんだけど。。。
QR コードの生成自体を JavaScript でやるのはめんどくさそうだし、別にそこを作りたかったわけではないので、Text::QRCode というニッチだけどピッタリなモジュールがあったため、これを利用しました。
このモジュールは、文字列を与えると以下のような QR コードの材料を二次元配列で返してくれるという優れもの。
******* * ** *******
* * *** * *
* *** * ** ** * *** *
* *** * * * * *** *
* *** * * * * *** *
* * * * *
******* * * * *******
** **
*** ******** ** *
* ** * * * **
* ***** * * *
** * * ** * *
** **** * * * * *
** * * * * **
******* * * *** ****
* * ****** ***
* *** * * ** *** ** *
* *** * * * **
* *** * ** * * *
* * ** * **
******* ** * * * ***これを JSON でクライアント側に送りつけて、クライアントはこのデータを元に canvas 上に QR コードを生成しています。
単純にこのデータを putImageData してしまうともの凄い小さな画像になってしまい、認識できなくなってしまうし、canvas 側で drawImage などで拡大しようとすると滲んだ画像になってしまうので、その辺は JavaScript 側でなんかゴリゴリやってます。
とは言いつつも、手元の環境ではそれなりにパフォーマンスは出るようで、問題なくリアルタイムに QR コードを生成することができました。
また Canvas を使うことで、PNG 画像として QR コードを保存することもできます。
サーバ側は諸事情あって Amon2 を使ってますが、やっていることを考えるとかなりオーバスペックかなぁとも思います。
まだまだ Canvas は使い慣れていませんが、なんか色々面白いことができそうですね。
Web Audio API や Web RTC とかもそのうち使ってみたいな。
というわけで、わーい。
