为何图片切割下载代码无法生成25张图，仅能下载15-20张？

一、并行执行时下载数量不足的原因 #

• 浏览器对同时触发的下载请求有频率限制，短时间内批量调用anchor.click()会被浏览器拦截或忽略部分请求。虽然console.log能打印25次，但密集的下载触发操作被浏览器限流，导致部分请求丢失。
• Promise.all是并行执行所有Promise，25个下载请求几乎同时发起，浏览器无法处理这么密集的下载触发逻辑。

二、串行执行时重复下载IMAGE25.png的原因 #

• 循环中创建的箭头函数() => getCanvas(...)没有捕获当前循环迭代的countImg值，而是引用了同一个变量的最终引用。循环结束后countImg已经变为25，所有箭头函数执行时都会传入25，导致所有下载文件都是IMAGE25.png。

三、完整解决方案 #

1. 核心修复思路 #

• 采用串行执行逻辑，给浏览器足够时间处理每个下载请求，避免限流。
• 在循环中直接捕获当前迭代的参数值，避免变量引用问题。

完整修改后的代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切割工具</title>
</head>
<body>
    <canvas width="560" height="647" id="test"></canvas>
    <img src="#" id="captured" alt="">
    
    <script>
        let url = 're.png'; // 大图路径
        let countImg = 0, row = 5;
        var canvas = document.getElementById('test');
        var ctx = canvas.getContext('2d');

        fillWithImage();

        function fillWithImage(){
            var base_image = new Image();
            base_image.src = url;
            base_image.crossOrigin = "Anonymous";
            base_image.onload = async function(){
                ctx.drawImage(base_image, 0, 0);

                let cut = row;
                let w = Math.floor(base_image.width / cut);
                let h = Math.floor(base_image.height / cut);

                // 串行执行每个切割下载任务
                for (let i=0; i<cut; i++){
                    for (let j=0; j<cut; j++){
                        countImg++;
                        // 直接在循环中await，确保串行执行，同时捕获当前参数值
                        await getCanvas(canvas, j*w, i*h, w, h, countImg);
                    }
                }
                console.log('所有图片切割下载完成');
            }
        }

        function getCanvas(canvas, posX, posY, width, height, index){
            return new Promise((resolve) => { 
                var context = canvas.getContext('2d');
                var imageData = context.getImageData(posX, posY, width, height).data;
                var outputCanvas = document.createElement('canvas');
                var outputContext = outputCanvas.getContext('2d');
                outputCanvas.width = width;
                outputCanvas.height = height;

                var idata = outputContext.createImageData(width, height);
                idata.data.set(imageData);
                outputContext.putImageData(idata, 0, 0);

                var anchor = document.createElement("a");
                anchor.href = outputCanvas.toDataURL("image/png");
                anchor.download = `IMAGE${index}.PNG`;
                anchor.click();
                // 给浏览器预留处理时间，降低限流概率
                setTimeout(() => resolve("ok"), 100);
            });
        }
    </script>
</body>
</html>

关键修改点 #

• 直接在嵌套循环中使用await调用getCanvas，确保任务串行执行，同时自然捕获当前循环的countImg和坐标参数，避免变量引用错误。
• 在getCanvas的Promise中添加setTimeout，给浏览器100ms间隔处理每个下载请求，进一步降低被限流的可能。
• 移除冗余的函数数组和异步包装函数，简化代码逻辑。

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