Анимированный GIF на Fabric.js Canvas

Question

Я работаю над проектом, где меня попросили поддержать анимированный GIF на полотне fabric.js.

Согласно https://github.com/kangax/fabric.js/issues/560, я следил за советом для рендеринга с регулярными интервалами, используя fabric.util.requestAnimFrame. Видео просто отлично работает с этим методом, но GIF не обновляются.

var canvas = new fabric.StaticCanvas(document.getElementById('stage')); 

fabric.util.requestAnimFrame(function render() { 
    canvas.renderAll(); 
    fabric.util.requestAnimFrame(render); 
}); 

var myGif = document.createElement('img'); 
myGif.src = 'http://i.stack.imgur.com/e8nZC.gif'; 

if(myGif.height > 0){ 
    addImgToCanvas(myGif); 
} else { 
    myGif.onload = function(){ 
     addImgToCanvas(myGif); 
    } 
} 

function addImgToCanvas(imgToAdd){ 
    var obj = new fabric.Image(imgToAdd, { 
     left: 105, 
     top: 30, 
     crossOrigin: 'anonymous', 
     height: 100, 
     width:100 
    }); 
    canvas.add(obj); 
} 

JSFiddle здесь: http://jsfiddle.net/phoenixrizin/o359o11f/

Любые советы будут весьма признателен! Я искал везде, но не нашел рабочего решения.

Answer 1

Согласно to specs о drawImage метода Холст 2DRenderingContext,

В частности, когда CanvasImageSource объект представляет собой анимированный изображение в HTMLImageElement, агент пользователя должен использовать по умолчанию изображение анимации (тот, который определяет формат, должен использоваться , когда анимация не поддерживается или отключена), или, если нет такое изображение, первый кадр анимации при рендеринге изображения для API CanvasRenderingContext2D.

Это означает, что на холсте будет нарисован только первый кадр нашего анимированного холста.
Это потому, что у нас нет никакого контроля над анимациями внутри тега img.

И fabricjs основан на API холста и, таким образом, регулируется теми же правилами.

Решение заключается в том, чтобы разобрать все неподвижные изображения из вашего анимированного gif и экспортировать его в качестве спрайта. Вы можете легко анимировать его в fabricjs благодаря sprite class.