png identify とは

JavaScript で書かれた、PNG ファイルの様々な情報を表示するウェブブラウザ上で動作するアプリケーションです。(Chrome 16.0.912.77, Firefox 9.0.1 で動作確認) PNG, ZLIB の圧縮率向上をはかる際に、自分の求める詳細な情報を表示するツールが見当たらなかったので作成しました。

使い方

http://imaya.github.com/png.identify/
上記のページを開き、そのページに PNG ファイルをドラッグアンドドロップするだけです。

どんな情報を表示する?

まずはざっと一覧で。

  • ファイル名
  • イメージヘッダ
  • チャンク
  • パレット
  • フィルタ
  • イメージデータ圧縮関係

イメージヘッダ情報

PNG の IHDR チャンクの情報を表示します。

ihdr

チャンク

すべてのチャンクの位置とサイズ、CRC32ハッシュ値を表示します。

chunks

パレット

PLTE チャンクがある場合はパレットの詳細を表示します。

plte

フィルタ

画像で使用されているフィルタを表示します。 複数フィルタのフィルタが混在している場合は、各フィルタの割合と全てのフィルタを表示します。

filter

イメージデータ圧縮関係

IDAT チャンクで利用されている ZLIB に含まれるブロックの圧縮前と圧縮後のサイズと割合を表示します。

blocks

制限

  • 一度のドラッグアンドドロップで1つのファイルしか使えません。
  • Typed Array, Drag and Drop API, File API の使えるブラウザじゃないと動作しません。
  • Web Workers などは使っていないので、スペックによってはスクリプトの停止ダイアログが出るかもしれません。

使用ライブラリ

png.js: https://github.com/devongovett/png.js

ソースコード

GitHub リポジトリ: https://github.com/imaya/png.identify
ライセンスは MIT License です。