Make Animated GIFs from Videos with HTML5

Last updated on December 22, 2014 in Development

Make animated GIF from HTML5 video

Last time, I showed how to make screenshots of videos with HTML5 and now I will take that concept further by showing how to make animated GIFs from videos. You could send video frames to the server and use something like FFmpeg or ImageMagick to create the animated GIF but since I have recently stumbled upon this port of as3gif GIFPlayer to JS, I wanted to make this work completely on the client side. I will try to improve some processing with Web Workers but this will still be very CPU intensive.

I first load a web worker script and import all the HTML5 Canvas to GIF Animation scripts inside the web worker. I am going to send video frames to that web worker and do all the processing outside the main JavaScript thread. This way, the video and canvas will keep playing while the animated GIf is being generated. If this is your first time with web workers, you might want to check out my earlier post on using web workers with Ajax.

I am passing objects to the web worker and the first one sets up the GIF encoder with the speed of the video and the “soon to be created” GIF image. This occurs as soon as you press the “start GIF frames” button which makes a postMessage to the worker and sets a flag that tells the HTML5 canvas drawing loop to start sending video frames to the worker. If a frame is sent, it gets added to the GIFencoder using the encoder.addFrame method.

When you press the “end GIF frames” button, the flag is set to false and no more frames are sent. Also, I send a an empty object to the worker to give it a signal to process the animated GIF. It converts the images from the video into a binary animated GIF file and I turn that binary into base 64 encoded data url. This gets sent back to the main script which places the data into a IMG tag. I wrapped the IMG tag around a link with a download attribute so that it is easy to download your generated GIF.

This is going to be quite heavy on the CPU and I have only tested in Chrome and Firefox. Here is the Online Animated GIF Generator.