如何让JS合并Base64格式PNG图片并稳定返回Base64（兼容多浏览器）

现有若干PNG图片：1张不透明，其余为透明，均为Base64字符串格式。需通过JavaScript将它们重叠合并为单张图片，返回合并后图片的Base64字符串，要求兼容IE、Edge、Opera、Chrome、Firefox、Safari，无需展示图片，结果可用于控制台输出或其他JS函数。

尝试通过动态创建Canvas并使用drawImage实现，代码如下：

<html>
    <head>
        <meta charset="utf-8">
        <title>Тест 93 !</title>
    </head>
    <body onload="init()">
        <h1>Test 95 !</h1>

        <script type="text/javascript">
            function init() {
                const layer1Data = "data:image/png;base64,...";

                const layer2Data = "data:image/png;base64,...";
                const layer3Data = "data:image/png;base64,...";

                var single = layers2single(710, 750, layer1Data, layer2Data, layer3Data);

                console.log(single);
            }

            function layers2single(w, h, L11, L12, L13) {
                var layers, ctx;
                var img1, img2, img3, img4, img5, img6;
                var dataURL;

                layers = document.createElement("canvas");
                layers.class = "canvas";
                layers.width = w;
                layers.height = h;

                ctx = layers.getContext("2d");

                img1 = new Image();
                img1.onload = function() {
                    ctx.drawImage(img1, 0, 0);
                };
                img1.src = L11;

                img2 = new Image();
                img2.onload = function() {
                    ctx.drawImage(img2, 0, 0);
                };
                img2.src = L12;

                img3 = new Image();
                img3.onload = function() {
                    ctx.drawImage(img3, 0, 0);
                };
                img3.src = L13;


                dataURL = layers.toDataURL();

                return dataURL;
            }
        </script>
    </body>
</html>

但目前返回的dataURL要么为空，要么在Chrome、Edge、Opera中仅偶尔有效（刷新后结果不稳定）。求稳定兼容所有目标浏览器的实现方案。

核心问题分析 #

原代码的致命问题是异步加载未同步：图片的onload是异步执行的，当调用layers.toDataURL()时，大部分情况下图片还没加载完成，画布没有被正确绘制，所以返回空或不完整的结果。

修正实现方案 #

采用计数器跟踪加载状态的方式，确保所有图片加载完成后再依次绘制并导出Base64。这种方式无需依赖Promise，天然兼容IE等老浏览器。

function init() {
    const layer1Data = "data:image/png;base64,...";
    const layer2Data = "data:image/png;base64,...";
    const layer3Data = "data:image/png;base64,...";

    // 用回调获取结果
    layers2single(710, 750, [layer1Data, layer2Data, layer3Data], function(result) {
        console.log(result);
        // 这里可以把result传入其他函数使用
    });
}

function layers2single(w, h, layerDataList, callback) {
    const canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext("2d");
    
    let loadedCount = 0;
    const totalLayers = layerDataList.length;
    // 按顺序存储加载完成的图片，保证绘制顺序正确（底层到上层）
    const loadedImages = [];

    layerDataList.forEach(function(data, index) {
        const img = new Image();
        // 解决IE下可能的缓存或加载问题
        img.onload = function() {
            loadedImages[index] = img;
            loadedCount++;
            
            // 所有图片加载完成后执行绘制
            if (loadedCount === totalLayers) {
                drawLayersAndExport();
            }
        };
        // 处理加载错误，避免卡住
        img.onerror = function() {
            console.error(`第${index+1}层图片加载失败`);
            loadedCount++;
            if (loadedCount === totalLayers) {
                drawLayersAndExport();
            }
        };
        img.src = data;
    });

    function drawLayersAndExport() {
        // 按顺序绘制图片，先画的在底层
        loadedImages.forEach(function(img) {
            if (img) {
                ctx.drawImage(img, 0, 0);
            }
        });
        // 导出Base64
        const dataURL = canvas.toDataURL("image/png");
        callback(dataURL);
    }
}

关键优化点 #

1. 异步状态同步：通过计数器loadedCount确保所有图片加载完成后才开始绘制，彻底解决异步导致的结果不稳定问题。
2. 绘制顺序保障：按传入的图层顺序存储加载完成的图片，保证底层图片先绘制，上层图片覆盖，符合重叠逻辑。
3. 错误处理：添加onerror事件，避免某张图片加载失败导致整个流程卡住。
4. IE兼容：无需Promise等ES6特性，原生API实现，兼容IE9及以上（IE9开始支持Canvas的toDataURL）。
5. 灵活扩展：改用数组接收图层数据，支持任意数量的图层合并，比原代码的固定参数更灵活。

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