Извлечение кадров из gif с помощью легкого браузера JS libary (например, omggif)

Question

Я хотел бы извлечь кадры из GIF-файла в браузере. Более конкретно, учитывая URL gif gifUrl: string, я хотел бы загрузить его и получить в виде массива кадров imageList: ImageData[]). Я буду использовать putImageData на них в различных координатах холста. Я также хотел бы, чтобы решение было легковесным.

Вкл. BundlePhobia , omggif длиной 50 мс для загрузки через появляющийся 3G. Все альтернативы, которые я видел до сих пор, более 700 мс. Тем не менее, omggif предлагает только базовые c низкоуровневые взаимодействия, и отсутствуют общие рецепты, такие как получение gif в виде массива ImageData.

Лучшая документация, которую я нашел для omggif на данный момент, это Типы omggif в проекте DefiniteTyped .

Есть также пример movableink (ожидание в PR с января 2019 года).

Я использую TypeScript и поэтому меня интересует если это возможно, напечатанные рецепты.

Смежные вопросы:

• Как извлечь кадры из анимированного GIF с помощью javascript? [закрыто]
• GIF-анимация на холсте с управлением кадром

Answer 1

Вот как вы это делаете:

import { GifReader } from 'omggif';

export const loadGifFrameList = async (
    gifUrl: string,
): Promise<ImageData[]> => {
    const response = await fetch(gifUrl);
    const blob = await response.blob();
    const arrayBuffer = await blob.arrayBuffer();
    const intArray = new Uint8Array(arrayBuffer);

    const reader = new GifReader(intArray as Buffer);

    const info = reader.frameInfo(0);

    return new Array(reader.numFrames()).fill(0).map((_, k) => {
        const image = new ImageData(info.width, info.height);

        reader.decodeAndBlitFrameRGBA(k, image.data as any);

        return image;
    });
};

Если вам нужна прозрачность, вы можете использовать canvas, так как они могут затем взаимодействовать с ctx.drawImage(canvas, x, y):

import { GifReader } from 'omggif';

export const loadGifFrameList = async (
    gifUrl: string,
): Promise<HTMLCanvasElement[]> => {
    const response = await fetch(gifUrl);
    const blob = await response.blob();
    const arrayBuffer = await blob.arrayBuffer();
    const intArray = new Uint8Array(arrayBuffer);

    const reader = new GifReader(intArray as Buffer);

    const info = reader.frameInfo(0);

    return new Array(reader.numFrames()).fill(0).map((_, k) => {
        const image = new ImageData(info.width, info.height);

        reader.decodeAndBlitFrameRGBA(k, image.data as any);

        let canvas = document.createElement('canvas');

        canvas.width = info.width;
        canvas.height = info.height;

        canvas.getContext('2d')!.putImageData(image, 0, 0);

        return canvas;
    });
};