Fabric.js画布上的动画GIF

我正在研究一个项目，我被要求在fabric.js画布上支持动画GIF。Fabric.js画布上的动画GIF

按照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/

任何意见，将不胜感激！我一直在寻找，但还没有找到一个可行的解决方案。

来源

2015-01-20 Phoenix Rizin

您是否找到一个好的解决方案？ – 3244611user 2015-11-22 18:44:32

@ 3244611user我最终走了一条不同的路线，并使用非帆布解决方案，因为我找不到答案。 – 2015-11-23 19:56:05

我也有这个相同的问题。请@PhoenixRizin你最终选择了什么方法？ – 2016-11-29 03:40:40

根据to specs关于画布2DRenderingContext drawImage方法，

具体地，当CanvasImageSource对象代表了HTMLImageElement动画图像，用户代理必须使用动画的默认图像（当动画不被支持或被禁用时，格式定义的将被用于），或者如果没有这样的图像（动画的第一帧），则在呈现图像01用于CanvasRenderingContext2D API的。

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

而fabricjs基于画布API，因此受相同规则的调节。

解决方案然后解析您的动画gif中的所有静止图像并将其导出为精灵表。感谢sprite class，您可以使用fabricjs轻松制作动画。

来源

2017-01-10 00:44:02 Kaiido

Fabric.js画布上的动画GIF

回答

相关问题