使用轻型浏览器 JS 库（如 omggif）从 gif 中提取帧

Question

我想从浏览器中的 gif 文件中提取帧。更具体地说，给定 gif 的 url gifUrl: string，我想下载它并以帧数组的形式获取它imageList: ImageData[]）。我将putImageData在画布的不同坐标处使用它们。我还希望解决方案是轻量级的。

在BundlePhobia上，omggif通过 Emerging-3G 下载需要 50 毫秒长。到目前为止我见过的所有替代方案都在 700 毫秒左右。然而，omggif 仅提供基本的低级交互，并且缺少诸如将 gif 作为 ImageData 数组获取之类的常见方法。

到目前为止，我找到的有关 omggif 的最佳文档是DefinelyTyped 项目中的 omggif 类型。

还有movingink 的示例（自 2019 年 1 月起正在等待 PR）。

我使用 TypeScript，因此如果可能的话，我对打字食谱感兴趣。

相关问题：

• 如何使用 JavaScript 从 gif 动画中提取帧？[关闭]
• 带有帧控制的画布上的 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;
    });
};

如果您需要透明度，您可能需要使用画布，因为它们可以与以下接口连接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;
    });
};