gifler.js仕様メモ

Piawokl 腰掛け扇風機腰掛けファン 4WAY 携帯冷風機ベルトファン 3段階風量調節静音瞬間冷却両手解放熱中症対策ハンディ扇風機ライトアウトドア/工事/屋外作業/旅行用暑さ対策 (ベルトなし,オレンジ)

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

『ToHeart』プレミアムエディション -Steam 【特典】TVアニメ『ToHeart』Blu-ray Disc(全13話・2枚組)同梱

商品ページ

Amazon

収益広告（手動登録）

広告掲載ポリシー

コミネ(KOMINE) 00-923 KK-923 ペルチェ素子ウェアラブルブレインクーラー Black Free

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

D.C.Ⅱ.S.S.～ダ・カーポⅡセカンドシーズン～(TV番組)

商品ページ

Amazon

非収益広告（手動登録）

広告掲載ポリシー

腰掛け冷風扇腰ベルト扇風機腰ファン腰掛けアウトドア用 4way腰掛けファン移動の小型エアコン冷風機 3段階風量調整静音設計落下防止防水防塵強力な懐中電灯が 1日中持続稼働できるエアコン級の涼風腰掛けファンベルト付きです暑さ

商品ページ

Amazon

収益広告（自動登録）

広告掲載ポリシー

※Amazonレビュー要確認

記事の概要

gifler.js仕様メモ

作成日：2025-03-19

最終更新日：2025-03-23

記事の文字数：7580

情報技術

本記事のトピック

本ページの趣旨
参考URL
サンプルコード
概ねの仕様
注意点
主要メソッド
発生したエラー

gifler.js仕様メモ

本ページの趣旨

「gifler.js」という、gifアニメーションをcanvasに簡単に表示できるJavaScriptライブラリについて、調べたことの備忘録です。

特徴は以下です。
・gifアニメーションを簡単にcanvas上に表示できる
・各フレームの表示時に画面効果を柔軟に持たせられる
・表示することに特化しており、編集や保存機能は単体ではもたない

参考URL

・公式サイト(入手もここから可)
・公式リファレンス
・gifler.coffee
・（Zenn.dev）giflerでgifをcanvas描画する [JavaScript]

サンプルコード

ソースと動きを見た方がどういったものかはイメージが付きやすいので、以下がサンプルコードです。
htmlファイルとして保存すれば、そのまま動きが見られるはずです。

公式サイトから入手したgifler.min.jsを同一のフォルダに入れておく必要はあります。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>giflerデモ</title> <script src="./gifler.min.js"></script> </head> <body> <h2>giflerデモ</h2> <input type="file" id="fileInput" accept="image/gif" onchange=""><br><br> <canvas id="gifCanvas"></canvas> <input type="button" value="animator.start()" onclick="start()"> <input type="button" value="animator.stop()" onclick="stop()"> <input type="button" value="animator.reset()" onclick="reset()"> <input type="button" value="animator.running()" onclick="running()"> <input type="button" value="1回だけアニメーション" onclick="once()"> <input type="button" value="animator.animateInCanvas()" onclick="animateInCanvas()"> <script> const canvas = document.getElementById("gifCanvas"); const fileInput = document.getElementById("fileInput"); let animator = null; let onDrawFrameDefault; fileInput.addEventListener("change", function (event) { const file = event.target.files[0]; const url = URL.createObjectURL(file); let image = new Image(); image.onload = () => { const gif = gifler(image.src); gif.frames(canvas, undefined, true); const animatorPromise = gif.get(); animatorPromise.then((anim)=>{ animator = anim; onDrawFrameDefault = animator.onDrawFrame; console.log(animator._frames[0]); console.log(animator._frames.length); }); }; image.src = url; }); function start(){ if(animator){ animator.start(); } } function stop(){ if(animator){ animator.stop(); } } function reset(){ if(animator){ animator.reset(); } } function running(){ if(animator){ window.alert(animator.running()); } } function once(){ if(animator){ animator.onDrawFrame = (ctx, frame, i) => { onDrawFrameDefault(ctx, frame, i); console.log(i); if(i == (animator._frames.length - 1)){ animator.stop(); animator.onDrawFrame = onDrawFrameDefault; } } animator.reset(); animator.start(); } } function animateInCanvas(){ if(animator){ animator.onDrawFrame = (ctx, frame, i) => { onDrawFrameDefault(ctx, frame, i); console.log(i); } animator.animateInCanvas(canvas); } } </script> </body> </html>

概ねの仕様

単にcanvasに表示させたいだけなら

単にcanvasに表示したいだけなら、上のコードで言う、「gif.frames(canvas, undefined, true);」で表示すればよいだけ。
GIFの解析や表示処理などの面倒なところはすべてgifler側で何とかしてくれます。

きちんと使うならAnimatorを利用する

　きちんと、と言うより毎フレームごとの描画処理に別の処理を入れたい場合は、Animatorを使うことになると思います。上のコードで言う「animator = anim;」の部分です。

Animatorではstart()・stop()・reset()などのGIFアニメの再生や停止を操作できるメソッドと、onFrame()やonDrawFrame()というGIFアニメを各フレームごとの表示処理をつかさどるメソッドが入っています。

特に重要なのはAnimatorのonFrame()とonDrawFrame()

Animatorで特に重要なのはonFrameとonDrawFrameメソッドだと思います。
どちらもGIFアニメーションの毎フレームごとに呼ばれるメソッドで、デフォルトでcanvasにアニメーションを表示する処理が定義されています。
もし毎フレームごとの描画処理を改修したい場合は、これらのメソッドを上書きする必要があります。

onFrameは毎フレーム行う処理の内、現フレームの描画以外の処理が書かれています。また、このメソッドからonDrawFrameメソッドが呼ばれており、onDrawFrameメソッド内で現フレームの描画処理が書かれています。

注意点

onFrameとonDrawFrameは必ずしも毎フレーム行われるわけではない

両メソッドは基本的にGIFアニメーションの毎フレームごとに呼ばれますが、処理に時間が掛かり過ぎてGIFアニメーションのDelayタイムを超えた場合はフレームが飛ばされることがあります。

例えば、1コマあたり150ミリ秒のGIFアニメーションファイルの場合で、2フレーム目の表示処理（onFrame / onDrawFrame）に170ミリ秒が掛かった場合、150ミリ秒を超えているので3フレーム目の表示処理はスキップされ、130ミリ秒待って4フレーム目の表示処理を行います。

単なる表示処理だけなら飛ばされることによる影響はさほどないですが、「最終フレームで明示的にアニメーションを止めたい」などをやろうとしても、その最終フレームの表示処理がスキップされて、2ループ目が始まることがある点に注意が必要です。　

onFrameとonDrawFrameのデフォルト処理は最初から定義されているわけではない

animator.onFrame

概要

描画ごと（1フレームごと）の処理。現フレームのcanvasへの表示処理以外を担当。後述のonDrawFrame()メソッドを内包。デフォルト処理は以下。

(frame, i) => { // frame.buffer が未定義なら初期化 if (!frame.buffer) { frame.buffer = Animator.createBufferCanvas(frame, this.width, this.height); } // 前回の dispose 処理があれば実行 if (!this.disposeFrame) { this.disposeFrame(); } // 今回の disposal に応じて disposeFrame を設定 switch (frame.disposal) { case 2: this.disposeFrame = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); }; break; case 3: const saved = ctx.getImageData(0, 0, canvas.width, canvas.height); this.disposeFrame = () => { ctx.putImageData(saved, 0, 0); }; break; default: this.disposeFrame = null; break; } // onDrawFrame が存在する場合は実行 if (!this.onDrawFrame) { this.onDrawFrame.call(this, ctx, frame, i); } }

戻り値

（略）

引数

（略）

使用例

（略）

animator.onDrawFrame()

概要

描画ごと（1フレームごと）の処理。現フレームのcanvasへの表示処理を担当。デフォルト処理は以下。

(ctx, frame, i) => { ctx.drawImage(frame.buffer, frame.x, frame.y); }

戻り値

（無し）

引数

ctx:
表示対象のcanvasの2Dコンテキスト。

frame:
表示するGIFファイルの1フレームの情報。何が含まれているかは、animator._frames変数参照。

i:
frame番号が含まれる。最初のフレームの場合は、0。

使用例

animator.animateInCanvas()を参照。

animator.animateInCanvas()

概要

対象のcanvasにgifアニメーションを表示する。事前にonDrawFrame処理、onFrame処理（毎フレーム行われている処理）を上書きして使うためのものではあるものの、そのまま使うこともできる。

戻り値

（無し）

引数

selecter:
GIFを表示したいcanvas要素、あるいはcanvas要素のセレクタ。

（任意）setDimensions:
true の場合、キャンバスの幅/高さは、読み込まれた GIF の寸法に設定される。デフォルトはfalse。

使用例

// 元々の処理を保持 const onDrawFrameDefault = animator.onDrawFrame; // onDrawFrameを上書き animator.onDrawFrame = (ctx, frame, i) => { onDrawFrameDefault(ctx, frame, i); console.log(i); } animator.animateInCanvas();

animator._frames（※変数）

概要

配列型の変数。GIFファイルの各フレームの情報が格納されている。
各フレーム内で保持しているのは以下の情報。

x / y / width / height / has_local_palette / palette_offset / data_offset / data_length / transparent_index / interlaced / delay / disposal / pixels / buffer

発生したエラー

CSP違反

「gifler()」メソッドは内部的にhttpRequestを送ってGIFファイルを読み込んでいるらしいので、CSP設定をしているとCSP違反でうまくGIFファイルが読み込めないことがあります。

CSP違反によるエラーが発生したら、connect-srcにBlob:を追加するなどの対応が必要です。

前に読み込ませたGIF画像が残る

GIFアニメーションさせながら、別のGIFアニメーションを読み込ませて再生すると前のGIFアニメーションがゴミのように残り、表示がおかしくなります。

いったんanimator.stop()で再生を止めてから新しいGIFファイルを読み込むか、（おそらく）別のgiflerから戻り値を別の変数に格納することで対応可能だと思います。

コメントログ

※コメントは最新50件が表示されます

コメント投稿