如何计算一个动画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>

​