「アニメGIFからパラパラ漫画の冊子を作る」
という記事に触発されて、
JavaScript版を作ったらどうだろうかと思い立ち、
まずはGIFをparseするライブラリを探してみるも、
個人的にしっくり来るのが見つからなかったので
改造して新たにライブラリを作ったりしました。
次に必要なのはPDFを生成するライブラリ。
いくつかあるようなのですが、
クライアント側だけでうまくやれそうなのは
jsPDF一択という感じ。
ただ、
こちらのドキュメントを見ると、
画像を扱うAPIが見当たらない・・・うむむ。
一方、こちらのLiveDemoでは画像を扱ってる・・・？？？。
調べてみた所、
ドキュメントにはjsPDFのコアな部分についてのみ書いてあるようです。
画像を扱うための addImage なるAPIは
プラグインという形で提供されているようです。
こちらのGitHubにある、
"dist/jspdf.debug.js" および "dist/jspdf.min.js"
がプラグインを同梱しています。
前者は debug とかなってますが、minimizeされてないだけです。
debug時はこちらを使ってね、くらいな意味合いだと思います。
さて、
jsPDF.addIamge()には dataURL な画像イメージを渡します。
読み込んだGIFファイルはcanvasに展開することになるので、
canvas.toDataURL()すればbase64なPNGを簡単に得ることが出来ます。
これでどうにかなりそう。
とか思ったんですが・・・実は苦労しました(^_^;)
コマ数が数十枚程度のアニメGIFを処理したら
ブラウザがメモリ不足エラーを起こしました・・・。
PNGをデコードしてPDFで扱えるようにしてるようなのですが、
イメージのサイズの総量が大きすぎるようです・・・。
addImageには圧縮のオプションがあるので、
指定してやってみたらエラーは起きなくなりましたが、
今度は時間が掛かることになってしまいました。
jsPDFでPNGを扱うのはメモリ的＆速度的に
ちょっと厳しいのかもしれません。
さてどうしたものか、と思いながら
addImageのソースを眺めていたら、
分かったことが２つありました。
ひとつはPNGだけでなくJPGも扱えること。
もうひとつは、
PNGはデコードした上で処理する必要があるが、
（圧縮指定があればさらにエンコードが必要）
JPGはほぼそのままで扱えるようになっていたこと。
PDFはJPGのイメージをそのまま扱えるっぽいようです。
そんなわけで、
canvas.toDataURL('image/jpeg', 0.8)とかやって
addImageに渡すようにしました。
速度的にだいぶ改善された感じがします。
PNGのlosslessに対してJPGはlossyになってしまうので、
画質を設定できるようにしました。
またメモリ不足エラーが起きてしまった場合に備えて、
PDFを複数ページに分割して処理できるような工夫もしてみました。
ちなみに、
jsなフレームワークの一つである Mithril.js が
いつのまにかバージョン v1.0.xとかになってて、
APIとか一新されてました。
よい機会なので今回使ってみた次第です。
v0.2.xは使ったことあるのですが、
v1.0.xはいろいろ変わってたりしてました。
どう変わったかについては別途書いてみるつもりです。
ということで、
アニメGIF⇒パラパラ漫画（JavaScript版）は
こちらから試せます。
ところで、
自分は印刷して切り出して冊子を作ったりしてなかったりします(^_^;)
あしからず。
実際にやってみた方の感想とかいただけるとうれしいかも。
