2011/08/23
PNGを解析してJavaScriptでPNGを描く「png.js」
png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 0
レコード画像を描く
0
写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 0
png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでimgタグで指定した内容と変わらないものが出てくる。それだけでは面白くないが、取り組みが興味深い。 0
MacBook風画像を描く
0
デコードする際には画像の幅、高さ、Bit、色の種類、圧縮メソッド、フィルタ、アニメーションなどPNGに関する様々な情報がプロパティに設定される。その結果をCanvasタグに再現している訳だ。PNG画像を解析してそこから情報を取り出したい時に使うこともできるだろう。JavaScriptでここまで…とうなってしまうソフトウェアだ。 0
プレミアムユーザには“MOONGIFTはこう見る”、記事の一行概要、追加スクリーンショット、デモや追加URLが表示されます。登録（500円/月）はこちらから！ プレミアムユーザのログインはこちらから 0
devongovett/png.js at master - GitHub
MOONGIFTの関連記事
このエントリーを含むTwitter
アンケート