Ionic App中Canvas toDataURL跨域污染问题求助（已设anonymous）

这个问题我之前处理跨域图片转Base64时也碰到过，核心原因是图片缓存+跨域属性设置顺序错误导致的——你的代码里先设置了img.src再配置crossOrigin，这会让浏览器在还没拿到跨域许可的情况下就加载并缓存图片，后续编辑时复用缓存的无跨域标记图片，直接触发画布污染报错。

问题代码的核心问题 #

看你的代码片段：

let img = new Image();
img.src = imgUrl; // 先触发图片请求
img.crossOrigin = "anonymous" // 这时候请求可能已经发出去了，设置无效

浏览器设置src后会立刻发起请求，后续再设置crossOrigin属性根本来不及生效，第一次加载的图片会被无跨域标记缓存，后续再用这张图时自然会污染画布。

修正后的解决方案 #

1. 调整属性顺序+添加缓存破坏参数

先设置crossOrigin再赋值src，同时给图片URL添加随机参数避免读取缓存：

public getBase64Image(imgUrl: string): Promise<string> {
  if (!imgUrl.includes("http")) {
    return Promise.resolve(""); // 原代码直接return会导致Promise异常，这里返回合法空值
  }
  return new Promise<string>((resolve, reject) => {
    let img = new Image();
    // 优先设置跨域属性
    img.crossOrigin = "anonymous";
    // 添加时间戳破坏缓存，避免复用之前无跨域标记的缓存图片
    const cacheBustedUrl = imgUrl + (imgUrl.includes('?') ? '&' : '?') + 't=' + Date.now();
    img.src = cacheBustedUrl;
    
    img.onload = () => {
      try {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL("image/png");
        resolve(dataURL);
      } catch (err) {
        reject(err); // 捕获错误，避免Promise挂起
      }
    };
    
    img.onerror = (err) => {
      reject(err); // 处理图片加载失败的情况
    };
  });
}

2. 额外注意事项

• 确保图片服务器支持CORS：服务器需要返回Access-Control-Allow-Origin响应头（可以是*或者你的Ionic应用域名），否则即使设置了crossOrigin="anonymous"也会失效。
• 复用已转换的Base64结果：编辑场景下，可以把第一次转换成功的Base64结果缓存起来，后续编辑直接复用，不用再重新从URL转换，既避免报错又提升性能。

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