Рисование первого кадра анимированного GIF на холст HTML5

Question

Когда я рисую изображение gif на элемент холста, прежде чем он закончит загрузку всего gif, это просто белая область. Но если я сделаю

window.stop() 

Перед тем, как закончить, он рисует gif в элементе. Проблема в том, что остановка всей страницы останавливает все gif, а не только конкретную, которую я хочу скопировать на холст. Как я могу нарисовать то, что в настоящее время загружено в gif, до элемента холста, прежде чем он завершит загрузку всего gif. Я думал о том, чтобы положить его в iframe и остановить iframe или какой-нибудь другой трюк, но мне также понравятся некоторые идеи или решения, которые вы, ребята, можете предложить.

Редактировать: Есть ли способ определить, сколько из gif было загружено в процентах с помощью javascript? Чтобы я мог знать, что загружен, по крайней мере, первый кадр?

Answer 1

Как я могу рисовать то, что в настоящее время загружены в формате GIF на холсте элемента до его завершения загрузки всего GIF

Вы не можете.

Это не ошибка как таковая. Спецификация диктует, что:

Если аргумент изображения является объектом HTMLImageElement, который не является полностью декодируемым ... тогда реализация должна вернуться без рисования.

Причина, по которой она работает, когда вы делаете stop() изображение технически объявлено полностью доступным. Или, точнее, на простом английском языке, «как доступно, поскольку он собирается получить».

Лучше всего предположить, что вы хотите, чтобы эта функция заключалась в том, чтобы сделать много маленьких изображений из фреймов gif и использовать их при загрузке. Любое другое решение (например, разбивка gif на лету) потребовало бы сначала загрузить весь gif, который, как вам кажется, считается неприемлемым.