Search code examples
javascripthtmlcanvasconvertersanimated-gif

I have an HTML5 canvas, I want to make an animated GIF of that canvas

I have a simple HTML5 page, with a single canvas, upon which a scientific visualization is drawn.

I would like to take X frames of that canvas (probably by using toDataURL() at key points), and turn that into an animated GIF that I can download.

Alternatively a nice way to save images from the DOM to disc without prompting, or to zip 100-200 images for saving with prompting that can be GIFed elsewhere.

Is there any ready solution to this problem? And I don't mean recording an AVI of part of the DOM, saving it, extracting frames, and rebaking it into a GIF.

Solution

  • There is no native functionality to save out animated GIFs but, there is this library written in JavaScript which can do it for you:
    https://github.com/antimatter15/jsgif

    Saving images to local disk without prompting is not possible. You will have either:

    • Create a link the user can click on to save (and chose location). Most up-to-date browsers will allow you to use the download attribute for the anchor tag (<a>).
    • Send it to server and then back with download attributes in header to prompt user for location

    Update

    If you want to just use the browser as a useful host for local tasks you can always disable these restrictions. Here for Chrome:

    To disable all security measures start Chrome from command line with this flag:

    chrome.exe --disable-web-security

    If you only want to use local files (file:// is in any case necessary):

    chrome.exe --allow-file-access-from-files

    I am not 100% sure of if these allow you to save to local disk but they are as close as you get without modifying the code base of the browser yourself.

    Hope this helps!