如何在 JavaScript 中获取 gif 图像的持续时间答案

【问题标题】：How to get duration of gif image in JavaScript如何在 JavaScript 中获取 gif 图像的持续时间
【发布时间】：2021-12-02 10:36:50
【问题描述】：

我尝试只显示一次 gif。所以我用这段代码来实现这一点。

    var ui_img = document.getElementById("ui_image");
    ui_img.hidden = false;
    setTimeout(function () {
        ui_img.hidden = true;
    }, 8000);

但我知道所有 gif 的持续时间都不相同。我该如何解决这个问题？

【问题讨论】：

标签： javascript image settimeout gif

【解决方案1】：

你可以尝试使用这个库gifuct-js。

主要使用parseGIF()，然后decompressFrames()得到一个帧数组，每个帧都具有delay属性：帧显示的时间量。因此，您可以将所有帧延迟相加得到 GIF 图像的总时长。

使用示例 - 来自其 Github 页面的修改代码示例：

import { parseGIF, decompressFrames } from 'gifuct-js'

var oReq = new XMLHttpRequest();
oReq.open("GET", gifURL, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; // Note: not oReq.responseText
    if (arrayBuffer) {
        var gif = parseGIF(arrayBuffer);
        var frames = decompressFrames(gif, true);
        // do something with the frame data

        // get total time in ms
        var totalTime = frames
            .map(frame => frame.delay)
            .reduce((a, b) => a + b);
    }
};

oReq.send(null);

【讨论】：