將動畫GIF的第一幀繪製爲HTML5 Canvas

Question

當我在完成加載整個gif之前將一個gif圖像繪製到canvas元素時，它只是一個白色區域。但如果我這樣做

window.stop() 

在它完成之前，它會在元素中繪製gif。 問題是，停止整個頁面會停止所有gif，而不僅僅是我想要複製到畫布的特定頁面。 在完成加載整個gif之前，如何繪製當前在gif中加載的內容到畫布元素。 我想也許把它放在iframe中，並停止iframe或其他一些技巧，但我也想要一些想法或解決方案，你們必須提供。

編輯：有沒有一種方法來檢測使用JavaScript下載的百分比有多少gif？爲什麼我可以知道至少第一幀已下載？

Answer 1

我怎麼能畫什麼當前加載GIF格式的canvas元素它完成加載整個GIF

你不能前。

這不是一個錯誤本身。該規範規定：

如果圖像參數是一個HTMLImageElement對象不能完全解碼...那麼實現必須返回而不繪製任何東西。

它的工作原理stop()圖像在技術上被宣佈爲完全可用。或者更準確地說，用簡單的英語，「儘可能獲得它。」

假設你想要這個功能，最好的辦法是從gif的框架中製作很多小圖片，並在加載時使用它們。任何其他解決方案（例如動態分解gif）都需要首先加載整個gif，這似乎是您認爲不可接受的。