Извлечение отдельных кадров из анимированного GIF на холст

Мне нужно загрузить все кадры анимационного GIF в холст HTML5.

Обратите внимание: я не хочу "воспроизводить" анимированные (кто-то спросил это раньше), все, что я хочу, - это извлечь все кадры, чтобы использовать их как отдельные изображения.

Ответ 1

К сожалению, короткий ответ заключается в том, что JavaScript не имеет возможности управлять текущим фреймом Анимированного GIF.

Долгий ответ заключается в том, что есть несколько способов сделать то, что вы хотите, только с JS, но они очень запутаны.

Пример хакерского способа: создайте холст и не добавьте его в DOM (так что это не будет видно никому). В быстром цикле (setTimeout) постоянно рисуйте на этом холсте и собирайте моментальные снимки. Сравните canvas ImageData, чтобы увидеть, изменились ли кадры.

Было бы лучше использовать ваше время, возможно, чтобы узнать, как вы можете разделить его сервер для вас (с помощью php/perl/python/etc)

Ответ 2

Buzzfeed лирифицировал код из сообщения repo tommitytom. Я еще не пробовал, но он выглядит хорошо.

https://github.com/buzzfeed/libgif-js

Ответ 3

Взгляните на jsgif; он загружает GIF, анализирует его и рисует отдельные кадры файла на <canvas>. С небольшим рытьем вы сможете найти код, который рисует отдельные кадры и работать оттуда.