アニメーションGIFからキャンバスへの単一フレームの抽出

アニメーションGIFのすべてのフレームをHTML5キャンバスにロードする必要があります。アニメーションGIFからキャンバスへの単一フレームの抽出

私はアニメーションを再生したくない（誰かがこれまでに尋ねた）ので、すべてのフレームを抽出して1つの画像として使用するだけでよいことにご注意ください。

2011-01-10 Omiod

uが、より具体的 –

ておいてくださいすることができます。 javascript + canvasを使用して、1つの "anim-gif"ファイル（多くのフレームで構成されています）を読み込み、1つの抽出フレームを1つの画像として使用したいと考えています。 – Omiod

申し訳ありませんが、JavaScriptはアニメーションGIFの現在のフレームを制御する方法がありません。

長い答えは、ちょうどJSだけで何かしたいと思う方法があることですが、非常に混乱したハックです。

ハッキング方法の例：キャンバスを作成し、DOMに追加しないでください（これは誰にも見られません）。高速ループ（setTimeout）では、このキャンバスに常に描画してスナップショットを収集します。 canvas ImageDataを比較して、フレームが変更されているかどうかを確認します。

それはあなたのサーバーは、（PHP/Perlの/ Pythonのは/ etcに）あなたのために離れて、それを分割して取得する方法を確認するために、おそらく、あなたの時間をより有効に利用することでしょう

出典

2011-01-10 15:17:58

hackish方法はスマートですが、予測不可能です。私は良いJSソリューションが出てこない場合は、私はサーバー側のスクリプトに頼らなければならないことに同意します...ありがとう。 – Omiod

このハックは可能ではありません。 'CanvasImageSourceオブジェクトがHTMLImageElement内のアニメーションイメージを表すとき、ユーザーエージェントはアニメーションのデフォルトイメージ（アニメーションがサポートされていないか無効になっているときにフォーマットが定義するもの）を使用しなければならず、そのような画像はありません。アニメーションの最初のフレームです。https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts – Robert

これはおそらく当時の回答は正しいでしょう。しかし、今日はlibgif-jsを使って仕事を終えることができ、それもかなり簡単です。 –

jsgifを見てみましょう。 GIFをダウンロードして解析し、ファイルの個々のフレームを<canvas>に描画します。少し掘り下げれば、個々のフレームを描画してそこから作業するコードを見つけることができるはずです。

出典

2013-05-30 14:36:50 tommitytom

Buzzfeedが投稿したレポのtommitytomからコードをライブラリー化しました。私はまだそれを試していないが、それはよく見える。

https://github.com/buzzfeed/libgif-js

出典

2013-07-02 15:37:30 Brendan

アニメーションGIFからキャンバスへの単一フレームの抽出

答えて

関連する問題