循环创建Canvas裁剪图片仅显示最后一个的问题求助

这个问题我太熟悉啦！核心原因是JavaScript循环里的异步闭包陷阱，咱们一步步拆解问题和解决方案：

问题根源 #

你用了var声明循环里的context、canvas和imageObj，而var是函数级作用域，不是块级作用域。当imageObj.onload异步触发时，循环早就跑完了，所有回调里的context都会指向最后一次循环创建的Canvas上下文，imageObj也指向最后一个实例，自然只会渲染最后一块裁剪图。另外你在drawImage里用了外部的imageObj而不是回调里的this，也会加重这个问题。

修复方案 #

方案1：用let替代var（推荐，ES6+） #

把循环里的变量声明从var改成let，这样每次循环都会创建独立的块级作用域，每个onload回调都能拿到当前循环对应的context和图片实例：

for(let i = 0; i < arr.length; i++) { 
    let canvas = document.createElement('canvas'); 
    canvas.id = "canvas"+ arr[i].x + arr[i].y; 
    canvas.width = arr[i].width; 
    canvas.height = arr[i].height; 
    let context = canvas.getContext("2d"); 
    let imageObj = new Image(); 
    imageObj.myCustomData = { x:arr[i].x, y:arr[i].y, wi: arr[i].width, he: arr[i].height }; 
    imageObj.src = 'example.jpg'; 
    imageObj.onload = function () { 
        const { x: sourceX, y: sourceY, wi: sourceWidth, he: sourceHeight } = this.myCustomData;
        // 这里用this指代当前加载完成的imageObj，不要用外部变量
        context.drawImage(this, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight); 
    }; 
    document.getElementById('canvasList').appendChild(canvas); 
}

方案2：自执行函数（IIFE）兼容老浏览器 #

如果需要支持ES5及以下环境，用自执行函数把每次循环的变量包裹起来，强制创建独立作用域：

for(var i = 0; i < arr.length; i++) { 
    // 用IIFE捕获当前循环的裁剪数据
    (function(cropData) {
        var canvas = document.createElement('canvas'); 
        canvas.id = "canvas"+ cropData.x + cropData.y; 
        canvas.width = cropData.width; 
        canvas.height = cropData.height; 
        var context = canvas.getContext("2d"); 
        var imageObj = new Image(); 
        imageObj.myCustomData = cropData; 
        imageObj.src = 'example.jpg'; 
        imageObj.onload = function () { 
            const { x: sourceX, y: sourceY, width: sourceWidth, height: sourceHeight } = this.myCustomData;
            context.drawImage(this, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight); 
        }; 
        document.getElementById('canvasList').appendChild(canvas); 
    })(arr[i]); // 把当前循环的arr[i]传入IIFE
}

额外优化建议 #

• 缓存图片避免重复加载：如果所有裁剪块用的是同一张图，建议在循环外先加载一次图片，加载完成后再循环绘制，这样能减少网络请求和内存占用：

  const imageObj = new Image();
  imageObj.src = 'example.jpg';
  imageObj.onload = function() {
      // 图片加载完成后再循环创建Canvas
      for(let i = 0; i < arr.length; i++) {
          const cropData = arr[i];
          const canvas = document.createElement('canvas');
          canvas.id = `canvas${cropData.x}${cropData.y}`;
          canvas.width = cropData.width;
          canvas.height = cropData.height;
          const context = canvas.getContext('2d');
          context.drawImage(this, cropData.x, cropData.y, cropData.width, cropData.height, 0, 0, cropData.width, cropData.height);
          document.getElementById('canvasList').appendChild(canvas);
      }
  }
  

• 确保页面中存在ID为canvasList的DOM元素，避免appendChild时出错。

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