设置crossOrigin为Anonymous时new Image无法加载的问题

问题核心 #

给Image设置crossOrigin="Anonymous"时，图片无法触发onload；移除该属性后图片能正常加载，但绘制到Canvas后会触发Canvas污染错误，无法调用toDataURL()等导出操作。

原因分析 #

1. CORS响应头缺失：设置crossOrigin后，浏览器会强制校验服务器的跨域配置。如果服务器未返回Access-Control-Allow-Origin这类合法CORS头，浏览器会拦截图片加载，不会触发onload（实际会触发onerror，你代码里没监听所以没察觉）。
2. 跨域资源默认限制：不设置crossOrigin时，浏览器会以“匿名模式”加载图片，但这种模式下的资源属于“不可操作跨域资源”，绘制到Canvas后会直接标记Canvas为污染状态，禁止导出数据。

解决方案 #

1. 服务器配置CORS（根本解决） #

联系图片存储服务器的运维人员，添加CORS响应头：

• 允许所有域名访问：Access-Control-Allow-Origin: *
• 仅允许指定域名：Access-Control-Allow-Origin: 你的页面域名
  配置完成后，设置crossOrigin="Anonymous"即可正常加载图片，且Canvas不会被污染。

2. 检查SVG内部资源（针对SVG文件） #

如果是SVG图片，需确保SVG本身没有引用跨域外部资源（比如外部<image>、<font-face>）。即使服务器配置了CORS，SVG内部的跨域资源也会导致加载失败或Canvas污染。你提供的corrupt_svg大概率存在这类问题，而fixed_svg修复了内部引用。

3. 后端代理（临时替代） #

如果无法修改服务器配置，可通过自己的后端做代理：

• 写一个后端接口，接收目标图片URL作为参数
• 后端请求目标图片，将图片数据返回给前端
• 前端加载自己后端返回的图片，无跨域问题，无需设置crossOrigin，也不会污染Canvas

代码排查建议 #

补充onerror监听，方便定位加载失败原因：

const image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = () => {
  // 正常加载逻辑
};
image.onerror = (err) => {
  console.error('图片加载失败:', err);
};
image.src = normal_image;

内容的提问来源于stack exchange，提问作者Jay-R Joseph Gabunada