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

回答

相關問題