javascript 从动画 GIF 中提取单帧到画布

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4645274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 14:24:26  来源:igfitidea点击:

Extracting single frames from an animated GIF to canvas

javascripthtmlcanvasanimated-gif

提问by Omiod

I need to load all the frames of an animated GIF to an HTML5 canvas.

我需要将动画 GIF 的所有帧加载到 HTML5 画布。

Please note, I don't want to "play" the animated (someone asked this before), all I want is to extract all the frames to use them as single images.

请注意,我不想“播放”动画(之前有人问过这个问题),我只想提取所有帧以将它们用作单个图像。

采纳答案by Simon Sarris

Sorry, the short answer is that JavaScript has no way of controlling the current frame of an Animated GIF.

抱歉,简短的回答是 JavaScript 无法控制动画 GIF 的当前帧。

The long answer is that there are sort-of ways to do what you want with just JS, but they are very much convoluted hacks.

长的答案是,有一些方法可以只用 JS 做你想做的事,但它们是非常复杂的黑客。

Example of hackish way: Create a canvas and don't add it to the DOM (so this won't be seen by anyone). In a fast loop (setTimeout), draw to this canvas constantly and collect snapshots. Compare the canvas ImageData to see if the frames have changed or not.

hackish 方式的示例:创建一个画布并且不要将它添加到 DOM(所以这不会被任何人看到)。在快速循环 (setTimeout) 中,不断地在此画布上绘制并收集快照。比较画布 ImageData 以查看帧是否已更改。

It would be a better use of your time, probably, to see how you can get your server to split it apart for you (with php/perl/python/etc)

可能会更好地利用您的时间,看看如何让您的服务器为您拆分它(使用 php/perl/python/etc)

回答by Brendan

Buzzfeed have librarified the code from the repo tommitytom posted. I haven't tried it yet but it looks good.

Buzzfeed 已经从发布的 repo tommitytom 中库了代码。我还没有尝试过,但看起来不错。

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

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

回答by tommitytom

Take a look at jsgif; it downloads a GIF, parses it, and draws the individual frames of the file to a <canvas>. With a bit of digging you should be able to find the code that draws the individual frames and work from there.

看看jsgif;它下载一个 GIF,解析它,并将文件的各个帧绘制到<canvas>. 通过一些挖掘,您应该能够找到绘制各个帧的代码并从那里开始工作。