使用HTML Canvas为加载后的图片添加边框时，修改image.src触发onload无限循环的解决咨询

嘿，我完全懂你碰到的这个问题！你在图片加载完成后用Canvas给它加边框，然后把Canvas的DataURL赋值给原Image的src，结果触发了无限的onload循环——这是因为修改image.src会让浏览器重新加载这个新的资源（也就是Canvas生成的DataURL），而每次加载完成都会再次触发onload回调，于是就陷入了“修改src→触发onload→再修改src”的死循环。

下面给你几个靠谱的解决思路，你可以根据需求选：

方案1：直接用Canvas代替原Image元素展示结果 #

既然你已经在Canvas里生成了带边框的图片，完全可以直接把Canvas添加到页面，不用再折腾原Image对象，这样从根源上避免循环问题。

修改后的代码示例：

let image = new Image();
image.onload = function () {
  console.log("onload");
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  // 让Canvas和原图尺寸一致
  canvas.width = image.width;
  canvas.height = image.height;
  
  ctx.drawImage(image, 0, 0);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.strokeRect(0, 0, image.width, image.height);
  
  // 直接把Canvas添加到页面，代替原Image
  document.body.appendChild(canvas);
};
image.src = "https://placehold.co/600x400";

方案2：创建新的Image对象展示带边框的图片 #

如果你还是想用<img>标签展示结果，可以创建一个新的Image实例，把Canvas的DataURL赋值给它，然后添加到页面，原Image对象可以选择移除或者保留（比如隐藏起来）。这样新的Image加载完成不会触发原Image的onload回调，也就不会循环。

代码示例：

let image = new Image();
image.onload = function () {
  console.log("onload");
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  
  ctx.drawImage(image, 0, 0);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.strokeRect(0, 0, image.width, image.height);
  
  // 创建新的Image对象
  let borderedImage = new Image();
  borderedImage.src = canvas.toDataURL();
  // 添加到页面
  document.body.appendChild(borderedImage);
  
  // 如果不需要原Image，可以移除它
  // image.remove();
};
image.src = "https://placehold.co/600x400";
document.body.appendChild(image); // 这里可以先添加原图，等处理完替换或者保留

方案3：给onload回调加执行标志（不推荐，但应急可用） #

如果你一定要修改原Image的src，可以加一个布尔标志，让onload回调只执行一次处理逻辑，后续再触发onload时直接跳过修改src的步骤。不过这种方案有点“治标不治本”，因为原Image还是会加载两次（原图和DataURL），不如前两种高效。

代码示例：

let image = new Image();
let hasProcessed = false; // 标志位，标记是否已经处理过图片

image.onload = function () {
  console.log("onload");
  if (hasProcessed) return; // 已经处理过，直接返回
  
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  
  ctx.drawImage(image, 0, 0);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.strokeRect(0, 0, image.width, image.height);
  
  hasProcessed = true; // 标记为已处理
  image.src = canvas.toDataURL();
};
image.src = "https://placehold.co/600x400";
document.body.appendChild(image);

推荐优先用方案1或2，它们更符合逻辑也更高效，能彻底避免循环问题。

内容来源于stack exchange