Canvas跨域图片被污染是浏览器安全机制所致，必须服务端返回Access-Control-Allow-Origin响应头且前端Image设置crossOrigin='anonymous'，二者缺一不可；否则toDataURL等操作将报错。
Canvas 加载跨域图片后被“污染”，本质是浏览器安全机制在起作用——只要图片来自不同源且未获授权，后续调用 toDataURL()、toBlob() 或 getImageData() 就会报错：“Tainted canvases may not be exported”。这不是前端能绕过的限制，必须服务端配合 + 前端正确声明，两者缺一不可。
服务端必须返回正确的 CORS 响应头
图片资源所在服务器需明确允许当前页面域名访问，不能只靠前端设置就生效：
- 静态资源（如 Nginx）：添加
add_header 'Access-Control-Allow-Origin' 'https://your-site.com'; - Node.js（Express）：
res.set('Access-Control-Allow-Origin', 'https://your-site.com'); - 若为公开图床或开发环境，可用
*，但注意它不支持携带凭证（如 cookie）的请求 - 务必检查 Network 面板中该图片响应头是否真实包含
Access-Control-Allow-Origin，且值匹配当前页面协议+域名
前端 img 元素必须启用匿名 CORS 请求
仅服务端配置还不够，前端加载图片时必须主动发起跨域请求：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 创建
Image实例后，必须在设置src之前 赋值crossOrigin = 'anonymous' - 错误写法：
img.src = url; img.crossOrigin = 'anonymous';（无效） - 正确写法：
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = url; - 如果图片已被缓存，可加时间戳避免读取旧响应：
img.src = url + '?t=' + Date.now();
验证是否真正解除污染
绘制完成后，快速检测是否仍被标记为污染：
立即学习“前端免费学习笔记（深入）”；
- 调用
ctx.getImageData(0, 0, 1, 1)不抛异常 → 说明未污染 - 调用
canvas.toDataURL()能返回以data:image/...开头的字符串 → 成功 - 若仍报错，先确认图片响应头、再确认
crossOrigin设置时机、最后检查是否用了use-credentials却没配服务端凭证支持
没有服务端权限时的可行替代方案
当无法修改图片服务器配置，只能从架构层面规避：
- 用自己后端做代理：前端请求
/api/proxy-image?url=https://xxx.com/img.jpg，后端 fetch 远程图并透传响应头（含 CORS） - 换用默认支持 CORS 的图床：如 Cloudinary、ImgBB、Unsplash API 等，多数公开 CDN 已预配好
Access-Control-Allow-Origin: * - 纯前端无法伪造 header、转 base64 或 Blob 构造来解除污染——这些操作对 canvas 污染状态无影响
