i-mobile
次へ下へ

Everyday Pieces ::

ありふれたカケラ::人生というジグソーパズルのピースたち

‘gif.js’ タグのついている投稿

アニメGIF⇒パラパラ漫画(JS版)

プログラム / gif.js
公開日:2017年3月13日

アニメ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のソースを眺めていたら、
分かったことが2つありました。
ひとつはPNGだけでなくJPGも扱えること。
もうひとつは、
PNGはデコードした上で処理する必要があるが、
(圧縮指定があればさらにエンコードが必要)
JPGはほぼそのままで扱えるようになっていたこと。
PDFはJPGのイメージをそのまま扱えるっぽいようです。

そんなわけで、
canvas.toDataURL('image/jpeg', 0.8)とかやって
addImageに渡すようにしました。
速度的にだいぶ改善された感じがします。
PNGのlosslessに対してJPGはlossyになってしまうので、
画質を設定できるようにしました。
またメモリ不足エラーが起きてしまった場合に備えて、
P


i-mobile
上へ次へ