gifjsとjsgifの違い

2020.06.03

  • 初めに

gifjsとjsgifともにgifを生成できるライブラリになっています。

ではどのように違うのか?調査してみました。

 

  • どう違うのか?

jsgifもgifjsも核となっているjsは同じです。

・LZWEncoder.js

・NeuQuant.js

・GIFEncoder.js

この3つのjsが基本的に使われるjsです。

jsgifのみ「b64.js」も読み込む必要があります。GitHubにはを「gifをレンダリングしたり、保存をしたい場合は「b64.js」も読み込んでおくと良い。」とありますが基本的に読み込んでおいた方がいいでしょう。

 

gifjsとjsgifの相違点は以下の4点です。

 

Point1:読み込むjsの量

jsgifはこの三つ(もしくは四つ)のjsを読み込みこんで使います。

しかしgifjsは1つのjsを読み込むだけで、同じようにgifを生成してくれます。GitHubからダウンロードしたデータの中に入っているgif.worker.jsを読み込むだけです。ただし、gif.worker.js内でLZWEncoder.js・NeuQuant.js・GIFEncoder.jsを読み込むようになっているので、機能はあまり変わらないです。

 

Chromeのperformanceで調べると、読み込むjsの量の違いからかgifを生成するまでのscriptの読み込みがgifjsが約20㎳、jsgifは約600㎳平均的にかかっています。軽い画像なら読み込み速度は気になりませんが、重い画像になるとgifを生成するまでの速度にかなりの差が出てきてしまいます。

gifjs

jsgif

jsgifもgifjs 両方でoptionでqualityをいじってみましたが、結果は変わりませんでした。速さを重視するならgifjsの方が良いかもしれません。

 

Point2:コードの書き方

gifjsとjsgifではコードの書き方が違います。

gifjsの特徴はoptionの設定部分が簡易的、フレームを追加するコードの書き方が何種類かある、という点です。

jsgifの特徴はgifのダウンロード機能がある点です。クリックイベントを設定すればダウンロードボタンが実装できますし、イベントを設定しないで自動でダウンロードすることも可能です。

 

giflsの基本的なコードの書き方

 

・jsgifの基本的なコードの書き方

 

生成したgif

使用画像

https://www.irasutoya.com/2017/11/blog-post_225.html

https://www.irasutoya.com/2017/11/blog-post_551.html

Point3:gifjs はCanvasをgifにできる

gifjsとCCaputure.jsと組み合わせてp5.jsで作った作品をgifにできます。gifjsを使うというよりは、CCaputure.jsのgifをキャプチャーする際にgif.worker.jsも一緒に読み込む仕様になっています。HTMLでCCapture.all.min.jsを読み込んでおいてください。

主に書いているコードはCCaputure.jsのコードです。HTMLCanvasに関しては二種類gif生成の方法があります。gifjsのみの方法とp5.jsと同様CCaputure.jsを使った方法です。

gifjsを使った方法は、次の項目に記載してある動画をgifにする方法とあまり変わらないです。

・p5.jsからgifを生成

 

・HTMLCanvasからgifを生成

 

point4:動画をgifにできる

gifjsを使うと動画もgifにできます。機能としては動画をまずキャプチャーしてからレンダリングをしてgifとして生成しているようです。gifを生成するには一つ以上の動画・画像ファイルが必要なようで、動画をgifにする際には軽い動画をgifにしたい動画の下に置いておく必要があるようです。また、動画を使う際にはnew GIF内での設定でheightを決めておかないとこれでもエラーが出てしまいます。

 

 

HTML

 

js

 

動画の制限としては時間が長すぎたり容量が大きすぎるとページで処理しきれなくなるので、動画サイズはSDかHDで1分以内なら比較的にストレスもなく生成できます。SDかHD で5分を超える動画・4KやフルHDだと1分以内の動画でもエラーが起きるか時々gif生成成功しても処理に5分以上時間がかかるのでおすすめはしないです。

生成されたgifは少し画質が落ちますが、きちんとgifになっています。

 

・動画、canvasをgifにする際の基本コード

 

※重くてアップロード出来なかったのでgifをキャプチャしました。

使用動画

https://pixabay.com/ja/videos/%E8%87%AA%E7%84%B6-%E6%B5%B7-%E6%B5%B7%E5%B2%B8%E7%B7%9A-%E6%B2%BF%E5%B2%B8-35264/

 

まとめ:

レファレンスに関してはgifjsの方が少ないので理解することが難しい印象でした。しかし使える幅は広そうです。

 

  • 終わりに

gifjsの方が動画からgifの生成をしてくれたり、書き方が簡単であったり、canvasをキャプチャーしたりといろいろな使用法がありますが、自分のスキルや用途によって使い分けてみると良いかもしれません。

 

参考サイト

https://GitHub.com/jnordberg/gifjs

https://GitHub.com/antimatter15/jsgif

https://www.freecodecamp.org/news/how-to-save-canvas-animations-with-ccapture-78c70f0e86ac/

https://qiita.com/yukidoke/items/23d322c87173a242977f

https://GitHub.com/spite/ccapture.js/