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

Question

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

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

Answer 1

Buzzfeed опубликовал код из размещенного репозитория. Я еще не пробовал, но выглядит хорошо.

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

Answer 2

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

Answer 3

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

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

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

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