从动画 GIF 中提取单帧到画布 [英] Extracting single frames from an animated GIF to canvas

问题描述

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

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

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

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.

推荐答案

抱歉，简而言之，JavaScript 无法控制 GIF 动画的当前帧.

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

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

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.

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

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.

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

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)

这篇关于从动画 GIF 中提取单帧到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！