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

Posted 2023-03-25

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

【英文标题】：How to count how many times an animated gif loops and display that count in javascript?

【发布时间】：2021-12-04 16:50:07

【问题描述】：

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

感谢您的任何见解！

【参考方案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" >
    <p>Loops : <span id="loop-counter">0</span> </p>