jsgif : A GIF player in JavaScript

Problem You look up a sorting algorithm on Wikipedia, and there's a handy animated GIF on the page; but it's hard to follow because it goes at a strange pace. Alas! If only you had some way of stopping the animation and going through it frame-by-frame...

Problem You have this hilarious animation of a cat doing a funny thing; but it would be 3½ times as hilarious if only it was playing in reverse. Alas! If only there was some way you could do that without leaving the comfort of your web page...

Introducing...

jsgif (drag to bookmark bar)

jsgif an animated GIF player bookmarklet with support for pausing, going frame-by-frame, playing in reverse, and other features that one might expect from a video player.

Unfortunately, the DOM doesn't expose individual frames of a GIF, so this is done by downloading the GIF (with XMLHttpRequest), parsing it, and drawing it on a <canvas>.

Here's an animated GIF to try it on (click the bookmarklet above, then click the image; image is from Wikipedia

Featuring Windows 3.11-style graphics, Web 3.11-style rounded corners, and the world's least efficient LZW decoder, jsgif is the needlessly-convoluted animated GIF player of choice for those with more CPU cycles and RAM than they know what to do with.

What the buttons do

Show info; reverse; previous frame; play/pause; next frame; pin/unpin; revert to GIF. "info" is the current frame and the delay per frame (both can be changed when paused).

You can figure it out.

Assorted notes:

Uses XMLHttpRequest to fetch the GIF's raw data, so doesn't work cross-domain; however, several browsers provide a wrapper DOM when displaying a plain image, so you can usually open an image directly and then use the bookmarklet on that “page”.

Browser support: Works at least in Chrom{e,ium} and Firefox; the former is recommended because V8 is fast, which matters for large GIFs. Probably doesn't work at all in IE and some other browsers. Seems to work in Opera, but has some odd UI issues.

Doesn't support a lot of the GIF spec, particularly parts that aren't used very much, but also some things that probably are, like disposalMethod (mainly because I couldn't find any GIFs with unusual disposalMethods, and didn't feel like implementing support for it without them; if you have a GIF that uses disposalMethod, let me know).

As mentioned, I believe that this LZW implementation (and most of the rest of the GIF implementation) is the least efficient ever written, in both space and time. If someone knows of a less efficient one, please tell me so I can remove this claim.

There are several easy optimizations that would make this much more efficient, but there didn't seem to be a point in doing them. Same thing with UI improvements

The source code is a bit of a mess, but if anyone is interested in the non-bookmarkletized code, it's available on GitHub.

You can email me at shachaf@gmail.com.