GIFをparseするjsなライブラリ

 プログラム
 公開日:2017年2月19日

 先日、
アニメGIFからパラパラ漫画の冊子を作る
という記事を取り上げましたが、
これのJavaScript版を作ったら面白いかも、
とか思い立ちました(^_^;)

 まずは、
GIFを扱うライブラリを探してみたのですが、
個人的に良さげなのが見つかりませんでした。
というかうまく見つけられなかったのかも(^_^;)
そんなわけでこちらのjsgifを元に作ってみることにしました。
GIFフォーマットの詳細はこちらを参照しました。

 元になったコードでは、
バイナリ文字列という手法でGIFイメージを扱っていますが、
これだと読み込みがXHR限定になってしまうし、
少々トリッキーで余計な処理も必要となる感じ。

 そこで、
arrayBufferでイメージを扱うように改造しました。
responseType='arraybuffer'なXHRや、
Drag&Drop経由の FileReader.readAsArrayBuffer()
読み込めるようになるので扱い易くなるのではないかと。

 また、
オリジナルではGIFイメージのchunk(データの塊)を走査する毎に、
指定があればコールバックを呼び出す作りになっていましたが、
直感的に扱いにくい感じだったので、
単純にparseした結果を返すように変えました。

 さらに、
canvasなコンテキストで扱うのに都合が良い
画像イメージを作成する機能を加えてみました。
ただ、透明ピクセル時に必要となるっぽい
disposalMethodなる処理が良く分かってないです(^_^;)

 なお、
GIFファイルのサイズが大きいとか、
コマ数が多かったりすると、
LZWなデコードを伴うせいか、
parseするのにそれなりな時間が掛かるようです。
WebWorkerとか使って別スレッドでやったほうが良いのかも?(^_^;)

 さて、
拙作のライブラリを使うには、
例えば以下のようにします。
GIFのイメージを読み込んだarrayBufferと
イメージを描画するためのcanvasを渡します。
アニメーションさせるには setTimeout()を使うのが簡便そうですが、
requestAnimationFrame()を使ってVSYNCな感じになるようにしてみました。

Gif.createFrameImages()について説明します。
第1引数にはCanvasの’2d’なコンテキストを渡します。
第2引数は値によって生成されるイメージが次のようになります。
・0の場合
  canvasContext.putImageData()向けのイメージを生成します。
・1の場合
  canvasContext.drawImage()向けのイメージを生成します。
 通常はこれが使いやすいと思います。
・2の場合
 1の場合と同様ですが、あらかじめレンダリングしたイメージを生成します。
 0と1の場合は、前フレームからの差分イメージになっています。

 ということで、
ちょっとしたツールを作ってみました。
アニメGIFをドロップすると各コマに分割してダウンロードできます。
試すにはこちらからどうぞ。
ライブラリのダウンロードも行えます。

 あとはPDFを生成できるようになれば、
パラパラ漫画な冊子を造れるようになるかも
だけど、予定は未定・・(^_^;)

タグ:

コメント投稿