Jon Galloway

Animated GIF Plugin for Cropper + some .NET Animated GIF code

WHAT'S ALL THIS, THEN?

Cropper is a great free screen capture program. It has a cool plugin system which lets you send the screenshots anywhere you can write code to send it. I wrote a plugin to save a portion of the screen to an Animated GIF.

I originally wrote it for use in a weblog post, but got so caught up in the ins and outs of image processing that I never posted the article that got this all started or the plugin I'd written. I just realized last week when I was using the plugin that I still needed to publish it, so here it is.

BUT, WHY?

There are some inexpensive screen recorders that save to animated GIF, but I really like working with Cropper and figured an Animated GIF plugin just made sense. I was just talking with a friend who recently started a technical blog (a very good one, I might add), and we both agreed that the way Cropper simplifies the "screenshot / open in editor / crop / convert format / upload" cycle is huge. Screenshots really enhance the readability of a blog¹, and keeping the friction as low as possible helps make sure you'll do it. I like the simplicity of using one tool for all my screenshots.

CREDITS AND TECH STUFF

I made use of some code from a CodeProject article, NGif. This code was a direct Java to .NET port of Kevin Weiner's AnimatedGifEncoder, which in turn was based on a bunch of public domain code dating back as far as 1994. The GIF Quantization uses NeuQuant, an interesting Neural Network quantizer. NeuQuant is a little slower than the Octree quantization that's so hot these days, but NeuQuant generally produces better quality images for the same file size. Don't your animated GIF images deserve the neural network treatment?

My plugin code is published under public domain license. Based on my research on the origin of the code above, I believe all the NGif code is public domain as well. I did some significant refactoring to the NGif code; the CodeProject version was a direct port from Java and didn't leverage .NET Framework classes like System.Drawing. Bottom line - after a good amount of research, I believe that all this code is under public domain license.

I wrote about all this license silliness previously.

I'm pretty happy with the way the plugin turned out. My first pass at it was pretty simple - take a picture every tenth of a second and add it to the animated GIF. I added an optimization which cut the file size way down, but took a bit more work - I compare each picture with the previous image and only added to the GIF if the image has changed. Since the Animated GIF format requires you to include the time duration of each image as it is added, I end up having to keep the image until the next one is added or capturing is stopped so I can calculate the duration that goes with the image.

I referenced this CodeProject article for comparing two images by using an MD5 hash, although my code just grabs a string hash and stores it rather than comparing two images directly.

Here's the main brains of the code:

        private void HandleImage(Image image)
        {
            string currentHash = GetHashFromImage(image);
            DateTime timeStamp = DateTime.Now;

            //Check if image has changed from previous
            if(currentHash != _previousHash)
            {
                if(_previousTimestamp != DateTime.MinValue)
                {
                    //This is not the first image being added
                    AddImageToAnimation(timeStamp);
                }
                StoreImage(image, currentHash, timeStamp);
            }
        }

        private void StoreImage(Image image, string imageHash, DateTime timeStamp)
        {
            _previousImage = (Image)image.Clone();
            _previousHash = imageHash;
            _previousTimestamp = timeStamp;
        }

        private void AddImageToAnimation(DateTime timeStamp)
        {
            TimeSpan timeSpan = timeStamp.Subtract(_previousTimestamp);
            _AnimatedGifEncoder.SetDelay(timeSpan.Milliseconds);
            this._AnimatedGifEncoder.AddFrame(_previousImage);
            _previousImage = null;
        }

DOWNLOAD

You can download the code and source for this plugin from http://www.codeplex.com/cropperplugins. (note: updated)

To install, copy all files to your Croppper\Plugins directory.

OTHER RANDOM TIPS

• You can edit your animated GIF's with Microsoft GIF Animator.
• It can be a little tricky to start recording, as a commenter noted. I use Cropper in "Always on top" mode and use the "S" key while Cropper is focused to start recording. "S" again stops recording.
• You can host animated GIF's on Flickr, but only the original size will show the animation. You can find that by clicking on the All Sizes button when you're viewing the picture, then pick the largest size (which should be the default).
• I highly recommend the Flickr Output Plugin for Cropper.
• You can combine TimeSnapper's history browser and Cropper Animated GIF captures for some fun results.

¹I'll readily agree that the animated GIF overload on this one particular post makes it much tougher to read. Please use your powers for good. I think this is a special case - I can't really blog about animated GIF's without including a few, can I?