Canvas图片拼接脚本异常：图片渲染不稳定、位置错乱求助

嘿，我一眼就看出问题所在了——你踩了异步加载的坑！图片的load事件是异步触发的，你写的两次循环里，每个图片的加载完成时间完全不确定，这就导致了：

1. 第一次循环中，totalWidth的累加和canvas.width的更新是乱序的，可能后加载的图片先完成，总宽度计算完全错误；
2. 第二次循环里，drawImage的执行顺序也没保障，x的累加自然也是混乱的，图片位置当然不对，甚至有些图片可能在canvas尺寸还没调整好的时候就渲染了，直接显示异常。

正确的做法：先统一加载所有图片，再计算尺寸+渲染 #

我们可以用Promise来把所有图片的加载过程变成可等待的，等所有图片都加载完成后，再一次性计算总宽度、设置canvas尺寸，最后按顺序渲染。这样就能完美保证顺序和尺寸的准确性。

修正后的代码如下：

const canvas = document.querySelector('canvas'); // 假设你已经获取了canvas元素
const ctx = canvas.getContext('2d');
const fileInputs = document.querySelectorAll('.has-file');

// 第一步：创建所有图片加载的Promise，同时保存缩放后的宽度
const imageLoadPromises = Array.from(fileInputs).map(input => {
  return new Promise((resolve) => {
    const file = input.files[0];
    if (!file) return resolve(null); // 跳过没有文件的输入框
    
    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    
    img.addEventListener('load', () => {
      // 计算当前图片缩放后的宽度（保持高度和canvas一致）
      const scaledWidth = img.width * canvas.height / img.height;
      resolve({ img, scaledWidth });
      // 记得释放objectURL，避免内存泄漏
      window.URL.revokeObjectURL(img.src);
    }, false);
    
    // 处理加载失败的情况
    img.addEventListener('error', () => {
      resolve(null);
    }, false);
  });
});

// 第二步：等待所有图片加载完成后，统一处理
Promise.all(imageLoadPromises)
  .then(imagesData => {
    // 过滤掉加载失败或无文件的项
    const validImages = imagesData.filter(item => item !== null);
    
    // 计算总宽度
    const totalWidth = validImages.reduce((sum, item) => sum + item.scaledWidth, 0);
    // 设置canvas宽度
    canvas.width = totalWidth;
    
    // 第三步：按顺序渲染所有图片
    let x = 0;
    const y = 0;
    validImages.forEach(({ img, scaledWidth }) => {
      ctx.drawImage(img, x, y, scaledWidth, canvas.height);
      x += scaledWidth;
    });
  });

关键改进点： #

• 用Promise.all确保所有图片都加载完成后再进行后续操作，彻底避免异步顺序问题；
• 提前计算好每个图片的缩放尺寸，渲染时直接使用，不用重复计算；
• 增加了错误处理，避免单个图片加载失败导致整个流程卡住；
• 调用URL.revokeObjectURL释放临时URL，防止内存泄漏。

这样修改后，图片就能按输入框的顺序依次横向渲染，尺寸和位置都会完全符合预期啦！

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