使用img.onload调整Base64图片尺寸时始终继承最后一张图尺寸的问题

我一眼就看出你遇到的问题所在了——这是JavaScript循环里经典的作用域陷阱，再加上一个容易踩的onload赋值错误。咱们一步步拆解：

核心问题分析 #

1. var的作用域陷阱：你用var声明循环变量i和img，var是函数级作用域，循环结束后所有onload回调会共享同一个i和img的引用。等图片加载完成时，i已经变成了循环的最大值，img也指向最后一次创建的Image实例，所以所有回调都会用最后一张图的参数。
2. 错误的onload赋值方式：你写了img.onload = resizeImage();，这里的括号会让resizeImage立即执行，而不是把函数本身赋值给onload事件，直接导致逻辑偏离预期。

修正方案 #

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

let是块级作用域，每次循环都会创建新的变量绑定，每个onload回调都会拿到当前循环的独立变量：

var list = myimgs.length;
var base64List = [];
var myJSON;
if(list != 0){
  // 把var改成let，让i和img成为块级作用域变量
  for(let i = 0; i < list; i++){
    let img = new Image();
    // 去掉resizeImage后面的括号，把函数引用赋值给onload
    img.onload = function() {
      resizeImage(img); // 传入当前循环的img实例
    };
    img.src = myimgs[i].src;
  }
}

// 示例resizeImage函数，接收当前img实例处理尺寸
function resizeImage(img) {
  // 设置目标宽高
  img.width = 你的目标宽度;
  img.height = 你的目标高度;
  // 将调整后的图片转成Base64存入列表
  base64List.push(img.toDataURL());
}

方案2：用闭包封装变量（兼容旧环境） #

如果需要兼容不支持ES6的环境，可以用闭包把每次循环的变量封装起来，让每个回调拿到独立的变量：

var list = myimgs.length;
var base64List = [];
var myJSON;
if(list != 0){
  for(var i = 0; i < list; i++){
    // 用立即执行函数创建闭包，保存当前循环的索引和img
    (function(index) {
      var img = new Image();
      img.onload = function() {
        resizeImage(img);
      };
      img.src = myimgs[index].src;
    })(i);
  }
}

function resizeImage(img) {
  img.width = 你的目标宽度;
  img.height = 你的目标高度;
  base64List.push(img.toDataURL());
}

方案3：使用forEach循环 #

forEach的回调函数本身会创建新的作用域，天然避免作用域共享问题：

var list = myimgs.length;
var base64List = [];
var myJSON;
if(list != 0){
  myimgs.forEach(function(item) {
    var img = new Image();
    img.onload = function() {
      resizeImage(img);
    };
    img.src = item.src;
  });
}

function resizeImage(img) {
  img.width = 你的目标宽度;
  img.height = 你的目标高度;
  base64List.push(img.toDataURL());
}

额外注意点 #

如果需要真正修改图片的像素尺寸（而非仅缩放显示），建议用Canvas处理，直接修改img.width/height只是改变显示大小，不会改变图片的实际数据：

function resizeImage(img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 设置目标宽高
  canvas.width = 300;
  canvas.height = 200;
  // 绘制缩放后的图片
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  // 转成Base64（可指定格式和质量）
  base64List.push(canvas.toDataURL('image/jpeg', 0.8));
}

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