Ich arbeite an einem Projekt, in dem ich gebeten wurde, animiertes GIF auf einer fabric.js-Zeichenfläche zu unterstützen.

As perhttps: //github.com/kangax/fabric.js/issues/56, Ich habe den Rat befolgt, in regelmäßigen Abständen mit fabric.util.requestAnimFrame zu rendern. Video wird mit dieser Methode problemlos gerendert, GIFs scheinen jedoch nicht aktualisiert zu werden.

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 hier:http: //jsfiddle.net/phoenixrizin/o359o11f

Jeder Rat wird sehr geschätzt! Ich habe überall gesucht, aber keine funktionierende Lösung gefunden.