你遇到的是Edge浏览器对跨域图片Canvas处理的特殊安全限制问题——这个错误本质是Canvas被跨域资源污染了，而且你之前的代码忽略了图片加载的异步性，同时Edge对缓存的跨域图片处理也更严格。下面是针对性的解决方案：

问题核心分析 #

1. 图片加载时机错误：你直接设置crossOrigin后就调用drawImage，但此时图片可能还没完成加载，跨域头的验证还没完成，导致Edge判定Canvas被污染。
2. 缓存导致跨域验证失效：如果图片已经在浏览器缓存中，Edge可能不会重新发起带crossOrigin头的请求，直接使用缓存的无跨域验证的图片，触发安全错误。
3. 异步流程未处理：循环里同步处理异步加载的图片，会导致部分图片还没处理完就被提交，出现FormData无图片的情况。

修复后的完整代码 #

首先补上你用到的dataURLtoBlob函数（如果还没实现）：

function dataURLtoBlob(dataUrl) {
  const arr = dataUrl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

然后重构图片处理流程，改用异步Promise确保所有图片加载完成后再处理：

async function processSelectedImages() {
  const selectedImages = Array.from(document.getElementsByClassName("selected"));
  const formData = new FormData();

  // 处理每一张图片，返回Promise
  const imagePromises = selectedImages.map(async (image, index) => {
    return new Promise((resolve, reject) => {
      // 1. 克隆图片对象，避免修改原DOM元素
      const imgClone = new Image();
      // 2. 添加随机参数，绕过缓存，确保跨域头生效
      const imageUrl = image.src + '?t=' + Date.now();
      imgClone.crossOrigin = 'anonymous';
      
      imgClone.onload = () => {
        try {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          canvas.width = imgClone.naturalWidth;
          canvas.height = imgClone.naturalHeight;
          // 图片加载完成后再绘制
          context.drawImage(imgClone, 0, 0, canvas.width, canvas.height);
          const dataUrlCanvas = canvas.toDataURL('image/png', 1.0);
          const blob = dataURLtoBlob(dataUrlCanvas);
          const filename = `file${index}.png`;
          formData.append(filename, blob, filename);
          resolve();
        } catch (err) {
          reject(err);
        }
      };

      imgClone.onerror = (err) => {
        reject(new Error(`图片加载失败: ${imageUrl}`));
      };

      imgClone.src = imageUrl;
    });
  });

  // 等待所有图片处理完成
  await Promise.all(imagePromises);
  
  // 这里发起POST请求，确保FormData已经包含所有图片
  fetch('/your-api-url', {
    method: 'POST',
    body: formData
  }).then(res => {
    console.log('请求成功');
  }).catch(err => {
    console.error('请求失败:', err);
  });
}

// 调用处理函数
processSelectedImages();

关键修复点说明 #

• 克隆图片+添加缓存破击参数：避免修改原DOM图片的同时，强制Edge重新加载图片并验证跨域头，解决缓存导致的安全错误。
• 异步Promise+await：确保所有图片都完成加载和Canvas处理后，再提交FormData，避免出现FormData无图片的情况。
• 错误捕获：添加onerror和try-catch，方便排查单张图片的加载或绘制错误。
• 严格等待onload：只有当图片完全加载完成后，才执行Canvas绘制操作，从根源避免Edge的SecurityError。

额外注意事项 #

• 确保图片服务器已经正确配置了CORS头（Access-Control-Allow-Origin），如果设置了crossOrigin: 'use-credentials'，服务器还需要配置Access-Control-Allow-Credentials: true。
• Edge旧版本对Canvas的跨域处理比Chrome/Firefox更严格，务必确保所有异步流程都正确等待。

内容的提问来源于stack exchange，提问作者Anaïs Feuvrier