きちぽよ〜

ねむい

WebWorker で画像のデコードがしてみたかったので,C言語のライブラリ (stb_image.c) を Emscripten で移植して Pure JavaScript な画像デコードライブラリを生成してみた

誰も得しそうに無いエントリをこりずに書く (デモGithub)

画像のバイナリデータ (ArrayBuffer とか Blob) をデコードして画像のピクセルデータというか, ImageData みたいな情報を取り出したかったので ,

  1. ArrayBuffer から Blob を作り,
  2. window.URL.createObjectURL で Blob URL を作り,
  3. img 要素の src に Blob URL を代入し,
  4. img 要素の onload イベント内で,canvas に drawImage メソッドを使って img 要素を描画し,
  5. canvas の getImageData を呼ぶ,

という作業をしていた.コードと実行例は以下.

期待通りの動作をしてくれてるのだけど,まわりくどいなーとか,俺は画像を表示したいんじゃなくてピクセルデータが欲しいだけなんだよなー *1とか,WebWorker で作業できないかなーとか,色々とどうでもいいことを思ったので Emscripten 先生の力を使って解決してみた.

変換したライブラリは stb_image.c.1ファイル (4600行強) なのに,色々なフォーマット (JPEG/PNG/TGA/BMP/PSD/GIF/HDR/PIC) に対応していて素敵.ただ Emscripten で生成されたコードの宿命というか,変換後のサイズは最適化+minify*2しても 293KB となった.

デモはこちら.表示している時間は,Blob URL から画像のRGBAデータを取得するのに要した時間 (ミリ秒).Firefox で試すと異様に早いなーと思ったら asm.js のおかげだったらしい."use asm" を消すと1ケタ遅くなった.Emscripten と asm.js のコンボはんぱねぇ…….

*1:何がしたいんですかねこの人は……

*2:emcc に -O3 オプションを与えた