読者です 読者をやめる 読者になる 読者になる

MANA-DOT

PIXEL ART, PROGRAMING, ETC.

JavaScriptで画像のパレット他を読み出すコードを書いた

Githubにて公開しています。 256色Png、普通のGifと簡単なアニメーションGifに対応しているつもり。IEでは動きません。 改変・使用は自由ですが、バグがあったら教えて欲しいです。

実行例

alice

patchouli_

使用方法

PixelUtil.load の第一引数に画像のURL、第二引数をコールバック関数を渡して呼び出します。 コールバック関数の第一引数に読み込んだ画像の情報を持つオブジェクトが渡されます。 XHRを利用しているので、実行ページと同じドメインの画像でないと基本的に読み込めません。 あとIEでも動きません(XHRでバイナリが読めない?)。

PixelUtil.load("alice.gif", function(img) {
  // ここでimgのプロパティを参照してほげほげする。
  img.width;      //幅
  img.height;     //高さ
  img.fileSize;   //ファイルサイズ
  img.colorDepth; //色深度
  img.palette;    //パレットの配列
  img.isPng;      //Png画像かどうか
  img.isGif;      //Gif画像かどうか
}

雑感

これ使って、任意の画像のパレットを表示するブラウザ拡張とか作れると思う。 ギャラリーページに埋め込んでみても面白そう。

謝辞

以下のサイトを参考にさせて頂きました。

追記

  • (2013/4/27) パレットサイズの計算を間違えていて、256色画像が16色までしか表示できなかったのを修正。
  • (2013/4/27) パレットの色の二桁にする処理を10進数で行なっていた間違いを修正。