PNGを解析してJavaScriptでPNGを描く「png.js」
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。
png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。
レコード画像を描く
写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。
png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでimgタグで指定した内容と変わらないものが出てくる。それだけでは面白くないが、取り組みが興味深い。
MacBook風画像を描く
デコードする際には画像の幅、高さ、Bit、色の種類、圧縮メソッド、フィルタ、アニメーションなどPNGに関する様々な情報がプロパティに設定される。その結果をCanvasタグに再現している訳だ。PNG画像を解析してそこから情報を取り出したい時に使うこともできるだろう。JavaScriptでここまで…とうなってしまうソフトウェアだ。
MOONGIFTはこう見る
当たり前ではあるが、Webブラウザ自体のレンダリングに比べるとpng.jsは遅い。今後改善される可能性はあるが、それでもネイティブには遠く及ばないだろう。だが画像として解析できているので、JavaScriptだけでPNG画像を縮小したり、切り抜いたりするライブラリに発展する可能性がある。そうなればレンダリング速度以上のメリットが生まれるだろう。
クライアントサイドで実現できることが増えている。サーバサイドで無理して実装する必要がなくなるかも知れない。それはサーバ側の負荷を減らし、スケールする仕組みが作りやすくなる。今後は何をクライアントで、何をサーバサイドで実装するかを考えながらシステム構築を行う必要があるだろう。