js 控制gif的播放时间

function playGifWithCustomSpeed(gifUrl, speedFactor) {
    const img = new Image();
    img.src = gifUrl;
    let frameIndex = 0;
    const frames = [];

    img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;

        function drawFrame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, frameIndex * img.width, 0, img.width, img.height, 0, 0, img.width, img.height);
            document.body.appendChild(canvas);

            frameIndex = (frameIndex + 1) % img.width / img.width;
            setTimeout(drawFrame, 100 / speedFactor); // Adjust speed here
        }

        drawFrame();
    };
}

// Usage
playGifWithCustomSpeed('path/to/your/gif.gif', 2); // Speed factor of 2 means twice as fast

import GIF from 'gifuct-js';

function playGifWithCustomSpeed(gifUrl, speedFactor) {
    fetch(gifUrl)
        .then(response => response.arrayBuffer())
        .then(buffer => {
            const gif = GIF.parseGIF(buffer);
            let frameIndex = 0;

            function drawFrame() {
                const frame = gif.frames[frameIndex];
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = frame.dims.width;
                canvas.height = frame.dims.height;
                ctx.drawImage(frame.patch, 0, 0);

                document.body.appendChild(canvas);
                frameIndex = (frameIndex + 1) % gif.frames.length;
                setTimeout(drawFrame, frame.delay * speedFactor); // Adjust speed here
            }

            drawFrame();
        });
}

// Usage
playGifWithCustomSpeed('path/to/your/gif.gif', 2); // Speed factor of 2 means twice as fast