跨域图片下载受限于canvas污染机制，需客户端设置crossorigin属性并服务端配置cors响应头；若失败可降级为原图下载或采用后端代理等替代方案。
跨域图片下载时的安全限制，核心在于浏览器对 canvas 的“污染”（tainted）机制：一旦用 <img> 加载了跨域图片并绘制到 canvas 上，若未获得 CORS 授权，canvas 就会被标记为污染状态，导致 toDataURL()、toBlob()、getImageData() 等方法直接报错，无法导出或读取像素数据。
确保图片加载时启用 CORS
这是最关键的一步。仅靠服务端配置还不够，客户端必须主动声明跨域意图：
- 在 HTML 中给
<img>标签添加crossorigin属性：<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous"> - 若图片是动态创建的，务必在设置
src前设置crossOrigin（注意大小写）：const img = new Image();<br>img.crossOrigin = 'anonymous'; // 必须在 src 之前<br>img.src = 'https://cdn.example.com/photo.jpg';
- 避免使用
crossorigin="use-credentials"除非你明确需要携带 cookie 或认证凭据；否则优先用anonymous，它不发送凭据，兼容性更好，也更安全。
服务端必须正确响应 CORS 头
客户端加了 crossorigin，只是发出了请求；能否成功加载，取决于服务端是否返回合法的 CORS 响应头：
- 静态资源（如 S3、CDN、Nginx 托管的图片）需配置允许跨域访问：
— AWS S3：在 Bucket 的 CORS 配置中添加规则，AllowedOrigins可设为具体域名（如https://your-app.com）或*（公开资源可用）；
— Nginx：在 location 块中添加：add_header 'Access-Control-Allow-Origin' '*';<br>add_header 'Access-Control-Allow-Methods' 'GET';<br>add_header 'Access-Control-Allow-Headers' 'DNT,X-Requested-With,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
- 特别注意：如果图片 URL 存在重定向（如 302 跳转），CORS 头必须出现在**最终响应**上，中间跳转响应缺失会导致失败。
下载前验证 canvas 是否被污染
即使做了上述配置，仍可能因缓存、网络异常或服务端配置遗漏导致污染。可在调用导出方法前做简单判断：
- 尝试读取一个像素（不触发错误）：
try {<br> ctx.getImageData(0, 0, 1, 1);<br> // 无异常 → 未污染，可安全导出<br>} catch (e) {<br> // 报错 → 已污染，提示用户或降级处理（如改用 <a download> 直接下载原图）<br>}</a> - 更稳妥的做法是：优先使用原图 URL 触发下载（
<a href="..." download></a>），仅当需要裁剪、水印、格式转换等 canvas 操作时，才走绘制+导出流程，并确保该流程已通过 CORS 全链路验证。
替代方案：绕过 canvas 污染限制
当无法控制图片服务端（如第三方图床不支持 CORS），又必须下载处理后图像时，可考虑：
- 后端代理：前端请求自己的后端接口，由后端 fetch 图片并返回二进制流，再传给前端 Blob URL 下载；这样全程同源，无 CORS 干扰。
- Service Worker 拦截：在支持的环境中，用 Service Worker 拦截图片请求，手动添加 CORS 头并返回（需配合
respondWith和Response构造）。 - 降级提示：检测到污染后，显示友好提示：“图片来自外部站点，暂不支持编辑下载，请右键另存为原始图片。”
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
