feat(): GIF support

[afnanz7634]

Hello I'm creating an editor tool in which i want to add gif inside the canvas . the problem i'm getting is When i add gif inside canvas it load it's first frame only it didn't animate it . I've used couple of solutions from stack overflow but didn't work.

please have a look : I've used gifuct-js to convert it into frames and then tried animate sprite it works on first stage but when i load the canvas from json it doesn't animate sprite too

I want you add a new feature to add gif in fabric canvas thanks

[ShaMan123]

We should consider supporting gifs under the hood Here's an example using gifler (which is very old...) There are more options:

• https://github.com/matt-way/gifuct-js
• https://github.com/buzzfeed/libgif-js old
• https://github.com/benwiley4000/gif-frames not maintained

A simple lookup gave these results

[ShaMan123]

demo using gifuct-js

seems you need to refresh the sandbox because of a bug on their side for canvas to start properly

[afnanz7634]

@ShaMan123 It works on the first initial render of canvas When I load canvas from JSON or I do undo and redo using fabric-history plugin . It doesn't animate the gif it only loads the first frame of gif. please give me an estimate when this gif feature will be available because my client need it very badly and i'm stuck on it please help

[ShaMan123]

Did you look at what I did???? There is no estimate.

[afnanz7634]

yes i look and used your code into my fabric app https://editortoolvue.herokuapp.com/ please have a look try to load the gif and then use undo or redo function you will see the the animation stops

[ShaMan123]

no thanks

[ShaMan123]

You should create a subclass of Image and incorporate my code into it Without that every time you init an Image you must init the gif rendering as well

[afnanz7634]

@ShaMan123 Well I didn't get your point if you give me an example code of it that would be great thanks

[asturur]

@afnanz7634 the gifs do not render on canvas natively, they did some years ago. The solutions are either:

• a library that will animate the gif for you
• a sprite sheet
• conver to an mp4 and use a video

Said so, we can look at publishing a clear example of how to obtain that, with the right priority since we are in the middle of a large rewrite.

Supporting gif animation or videos for your app means the browser is stuck in a continuos render loop that needs to be coordinated with multiple gifs/video, so please consider some remediation for performace reasons ( that are ux related, and maybe i m not the best person to suggest those )

[ShaMan123]

I think fabric can export GIF, VIDEO etc. VIDEO for sure, GIF maybe an example as @asturur suggested is enough

[asturur]

yes fabric can export video but is cpu dependant. i made a codepen some time ago, let me see if i can pull it out

[awehring]

A possible solution - more a workaround - could be an overlay of SVG-Graphics. SVG Graphics can reference an (animated) GIF. You can manipulate the GIF by copying the properties of the fabric.js shape to the SVG GIF. If your animation is not a "video" but a simpler animated graphic, you could use an animated SVG.

How to manipulate the SVG is shown in this example:

On top is the usual fabric.js canvas with some objects to manipulate - including an animated SVG-Graphic and an animated GIF (the horse). Below are the corresponding SVG objects with copied properties.

Here you play it yourself and examine the (fairly simple) code: jsfiddle.

In your case the SVG GIF must be stacked above the fabric.js canvas.

In fact, I think it would be possible to replace the whole canvas rendering with a much simpler SVG rendering: https://github.com/fabricjs/fabric.js/discussions/8424

[Andrekarma]

The @ShaMan123 solution is great for rendering But do you think there is a simple implementation to export the result canvas to a gif so you dont lose the animations inside?