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

我想从浏览器中的gif文件中提取帧。更具体地说，给定gif的url

gifull:string

，我想下载它并将其作为帧数组

imageList:ImageData[]

）获取。我将在画布的不同坐标处使用

putImageData

。我还希望解决方案是轻量级的

在上，通过emerging-3G下载50毫秒长。到目前为止，我看到的所有备选方案都在700ms左右。然而，omggif只提供基本的低级交互，并且缺少像将gif作为图像数据数组这样的常见方法

到目前为止，我为omggif找到的最好的文档是

还有（从2019年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;
    });
};

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;
    });
};