javascript-gif

Чтение и разбор по кадрам GIF-анимаций (es-module)

Подключение

import Gif from '/javascript-gif/Gif.js';

Использование

Загрузка GIF по URL

const src = '/path/to/animation.gif';
const gif = await Gif.fetch(src);

console.log(gif.frames); // список кадров GIF

Получение GIF из RAW-данных ({Uint8Array})

const buffer = ArrayBuffer(...);

const data = new Uint8Array(buffer);
const gif  = await Gif.raw(data);

console.log(gif.frames); // список кадров GIF

Доступные методы и поля

gif.size   // Vector2d -> {x, y}
gif.frames // array of {data: ImageData, delay: number (ms)}
gif.length // gif.frames.length

Пример - Рисование кадра index

const frame = gif.frames[index].data;
context.putImageData(frame, 0, 0);

Управление воспроизведением GIF (дополнительно)

import Player from '/javascript-gif/Player.js';

класс Player создан в демонстрационных целях, крайне рекомендуется в ваших проектах управлять воспроизведением GIF самостоятельно

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const player = new Player(gif);
player.init(context).resize().render(); // рисование GIF

// доступные методы
player.play()
player.pause()
player.render(absoluteIndex)
player.shift(relativeIndex)