How to create a Gif with Canvas content

Question

How to create a Gif with Canvas content

Navigation

#1 by (3 votes)

2

I would like to know how to create a gif from a canvas, on this canvas I have a sequence of scenes, after the scenes are created I wanted to read all the scenes and then save them as a .gif

javascript html canvas

asked by anonymous 06.02.2017 / 20:03

1 answer

Prevent multiple submit via jQuery Inserting and updating data in N-N tables (many for many)

score 3 · Accepted Answer

The canvas does not allow such operation natively, you will need an external library to be able to create a GIF.

Try jsgif

Example usage (extracted from github):

var encoder = new GIFEncoder();
  encoder.setRepeat(0); //0  -> loop forever
                        //1+ -> loop n times then stop
  encoder.setDelay(500); //go to next frame every n milliseconds
  encoder.start();
  encoder.addFrame(context);
  encoder.finish();
  var binary_gif = encoder.stream().getData();
  var data_url = 'data:image/gif;base64,'+encode64(binary_gif);