有没有办法在 JavaScript 中创建一个函数，它可以保存 3 个或更多 svg 或 png 并将其作为 gif 或视频播放？

Question

我有一系列的方块，我可以为每个方块填充不同的颜色，并将其保存在背景中为 png 格式。当用户点击下一步时，它应该播放带有这些系列不同颜色方块的视频作为预览。

请帮我解决这个问题。下面的 JS 代码不播放 gif.

function saveSquaresAsPng() {
    // Get all square elements
    const squares = document.querySelectorAll(".square");

    // Loop through squares and save as PNG
    for (let i = 0; i < squares.length; i++) {
        const square = squares[i];

        html2canvas(square).then(canvas => {
            // Convert canvas to PNG data URL
            const pngDataUrl = canvas.toDataURL("image/png");

            // Create a link to download the PNG file
            const link = document.createElement("a");
            link.download = `square-${i + 1}.png`;
            link.href = `"./images/square-" + (i + 1) + ".png"`;
            link.click();
        });
    }
}

function createGif() {
    // Get all saved PNGs and add them to the gif
    const gif = new GIF({
        workers: 2,
        quality: 10,
        width: 300,
        height: 300
    });
    for (let i = 1; i <= 3; i++) {
        const img = new Image();
        img.src = `"./images/square-" + i + ".png"`;
        gif.addFrame(img);
    }

     // Render the GIF and set it as the source of the <img> tag
     gif.on('finished', function(blob) {
        const imgTag = document.getElementById("myGif");
        imgTag.src = URL.createObjectURL(blob);
    });

     // Render frames into an animated GIF
    gif.render();

    console.log(gif);
}

我希望保存方块并作为gif播放。