如何用JavaScript将多幅SVG/PNG生成GIF并播放？现有代码故障求助

你的代码存在几个关键问题导致无法生成可播放的GIF，以下是具体问题分析和修复后的代码：

核心问题分析 #

• 路径拼接错误：saveSquaresAsPng和createGif中，link.href和img.src的字符串写法错误，错误地在模板字符串中嵌套了引号和拼接语法，导致路径无效。
• 本地文件访问限制：浏览器无法直接访问用户本地下载的文件路径，createGif尝试加载./images/square-i.png是不可行的——这些文件仅存在于用户本地，而非服务器或页面可访问的内存中。
• 异步加载未处理：createGif中直接创建Image并添加到GIF，但图片加载是异步操作，未等待图片加载完成就调用render，导致GIF没有有效帧。

修复后的代码 #

我们修改逻辑，先把每个方块的canvas数据存储起来，既支持下载，又能直接用于GIF合成：

// 存储生成的canvas对象，用于后续合成GIF
let squareCanvases = [];

function saveSquaresAsPng() {
    const squares = document.querySelectorAll(".square");
    squareCanvases = []; // 清空之前的存储

    // 使用Promise.all等待所有canvas生成完成
    Promise.all(Array.from(squares).map((square, index) => {
        return html2canvas(square).then(canvas => {
            squareCanvases.push(canvas); // 存储canvas到数组

            // 触发PNG下载
            const pngDataUrl = canvas.toDataURL("image/png");
            const link = document.createElement("a");
            link.download = `square-${index + 1}.png`;
            link.href = pngDataUrl;
            link.click();

            return canvas;
        });
    })).then(() => {
        console.log("所有方块已保存为PNG，可进行GIF合成");
    });
}

function createGif() {
    if (squareCanvases.length === 0) {
        console.error("请先保存方块为PNG");
        return;
    }

    const gif = new GIF({
        workers: 2,
        quality: 10,
        width: squareCanvases[0].width,
        height: squareCanvases[0].height // 使用实际方块尺寸
    });

    // 直接使用存储的canvas添加帧，无需重新加载图片
    squareCanvases.forEach(canvas => {
        gif.addFrame(canvas, { delay: 500 }); // 设置每帧延迟时间（毫秒）
    });

    gif.on('finished', function(blob) {
        const imgTag = document.getElementById("myGif");
        imgTag.src = URL.createObjectURL(blob);
        // 释放URL对象，避免内存泄漏
        setTimeout(() => URL.revokeObjectURL(imgTag.src), 10000);
    });

    gif.render();
}

关键修改说明 #

• 存储canvas数据：不再依赖本地文件，而是将每个方块生成的canvas直接存储在数组中，后续合成GIF直接使用这些canvas，避免了文件路径的问题。
• 修复路径错误：下载PNG时，直接使用canvas.toDataURL()生成的dataURL作为link.href，确保下载功能正常。
• 处理异步逻辑：使用Promise.all等待所有方块的canvas生成完成，保证后续合成GIF时有完整的帧数据。
• 设置帧延迟：添加帧时通过delay参数设置每帧的播放时间，让GIF可以正常播放动画。

内容的提问来源于stack exchange，提问作者Haritha