Saving an Animation Created with HTML5 Canvas

Question

Is it possible to give an end user the ability to save as a single file an animation created client side with HTML5 Canvas - other than saving the entire HTML of the page?

There are plenty of tutorials on how to save as PNG, but the animation is lost in these cases.

score 2 · Answer 1 · answered Jan 29 '13 at 15:42

2

You could use mjbuilder, it's a library that alllows you to save canvas frames into a mpeg file. But it has issues and it only works on Firefox.

http://ushiroad.com/mjpeg/

answered Jan 29 '13 at 15:42

Paul Fournel

10,807
9
40
68

Today I was required in that library and that's why I fix it for modern browsers: https://github.com/theshock/VideoBuilder – Shock Jan 27 '16 at 16:47

score 2 · Answer 2 · edited May 23 '17 at 11:55

There is not an "easy" way to do this.

Here is a similar question... Grabbing each frame of an HTML5 canvas

You could follow this approach and grab the frames and submit these to a server-side script to compile them into an animated GIF.

Another option, though non-trival, would be to implement a pure JavaScript GIF encoder. The GIF specification can be found here, http://graphcomp.com/info/specs/gif89a.txt

If the color table stays the same in each frame, you could probably splice together the frames from already encoded GIF urls without having to compress the pixel level data. You would still need to decode the base64 stream from Canvas.toDataURL.

Saving an Animation Created with HTML5 Canvas

2 Answers2