fabricjs - How to play gif with Fabricjs?

Question

I know fabricjs can play Video and sprite sheet, But I have a lot of gif files, can I play these gif directly with fabricjs? I am not able to find method in Fabricjs website.

标签： fabricjsgif

Answer 1

根据有关 Canvas 2DRenderingContext drawImage 方法的规范，

Specifically, when a CanvasImageSource object represents an animated image in an 
HTMLImageElement, the user agent must use the default image of the animation (the one 
that the format defines is to be used when animation is not supported or is 
disabled), or, if there is no such image, the first frame of the animation, when 
rendering the image for CanvasRenderingContext2D APIs.

这意味着只有动画画布的第一帧会被绘制在画布上。这是因为我们对 img 标签内的动画没有任何控制。

而fabricjs是基于canvas API的，因此受到相同规则的监管。

解决方案是您需要解析动画 gif 中的所有静止图像并将其导出为 sprite-sheet。然后，借助 sprite 类，您可以轻松地在 fabricjs 中对其进行动画处理。