如何计算动画 gif 循环的次数并在 javascript 中显示该计数？

Question

有没有办法显示动画 gif 循环的次数？例如，您登陆一个带有动画 gif 的页面，当该 gif 完全循环其动画一次时，将显示 1。每次 gif 完全循环时，该数字都会增加 1。永远。

感谢您的任何见解！

Answer 1

我计算 gif 的持续时间，然后 setInterval。 我的 gif 有 15 秒长。

const gif = document.getElementById("gif");
    gifLoopCounterInit(gif.src);
    function gifLoopCounterInit(fileSrc) {
        var request = new XMLHttpRequest();
        request.open('GET', fileSrc, true);
        request.responseType = 'arraybuffer';
        request.addEventListener('load', async function () {
            calcDurationGif(request.response).then(function (duration) {
                const loopCounter = document.getElementById("loop-counter");
                setInterval(function () {
                    loopCounter.innerHTML++;
                }, duration * 1000);
            });
        });
        request.send();
    }
    function calcDurationGif(file) {
        return new Promise((resolve, reject) => {
            try {
                let arr = new Uint8Array(file);
                let duration = 0;
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == 0x21
                        && arr[i + 1] == 0xF9
                        && arr[i + 2] == 0x04
                        && arr[i + 7] == 0x00) {
                        const delay = (arr[i + 5] << 8) | (arr[i + 4] & 0xFF)
                        duration += delay < 2 ? 10 : delay;
                    }
                }

                console.log(duration / 100);
                resolve(duration / 100);
            } catch (e) {
                reject(e);
            }
        });
    }

<img id="gif" src="https://c.tenor.com/AeFQKHQFFq8AAAAd/gif-art.gif" alt="">
    <p>Loops : <span id="loop-counter">0</span> </p>