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

Question

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

window.stop()

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

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

Answer 1

Как нарисовать то, что в данный момент загружено в gif, в элемент canvas до того, как закончится загрузка всего gif

Вы не можете.

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

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

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

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