crossorigin="anonymous"本身不能防止canvas被污染，必须配合服务端返回access-control-allow-origin响应头才有效；若服务端未配置cors头，即使设置了该属性，drawimage后仍会触发“tainted canvas”错误。
crossorigin="anonymous"到底能不能让canvas不被污染
不能单靠这个属性解决——它只是告诉浏览器“请用CORS方式请求这张图”，真正起作用的是服务端返回的Access-Control-Allow-Origin响应头。如果服务端没配，图片照常显示，但ctx.drawImage()之后立刻触发SecurityError: The canvas has been tainted by cross-origin data。
为什么写了crossorigin="anonymous"还是报tainted canvas
最常见原因就是服务端没返回合法CORS头。检查Network面板里该图片请求的Response Headers，必须包含：
-
Access-Control-Allow-Origin: *（或明确匹配你当前域名的值，如https://your-site.com） - 如果用了
crossorigin="use-credentials"，还必须有Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能是* - CDN或对象存储（如阿里OSS、AWS S3）默认不开启CORS，需手动配置规则；Nginx反向代理时要显式透传头：
add_header Access-Control-Allow-Origin "*";
JS动态创建Image时crossOrigin赋值顺序不能错
用new Image()加载跨域图时，crossOrigin必须在设置src之前赋值，否则CORS请求不会发起：
const img = new Image(); img.crossOrigin = 'anonymous'; // ✅ 必须放这里 img.src = 'https://cdn.example.com/photo.jpg'; // ❌ 不能放这行之后
写成img.src = '...'; img.crossOrigin = 'anonymous';就等于没设——浏览器已按普通跨域模式发出请求，后续赋值无效。
file://协议下crossorigin完全失效
本地双击HTML文件打开，或某些Live Server未正确处理Origin时，crossorigin会被忽略。此时即使服务端配了CORS头，浏览器也不会发带Origin的请求，更不会校验响应头。必须用真实HTTP服务启动页面（如npx http-server或VS Code Live Server），并确认图片URL响应中确实含Access-Control-Allow-Origin。
跨域图片能显示 ≠ 能读像素，这个边界卡得非常死——浏览器只认CORS流程是否完整走通，其他任何前端技巧（比如base64转换、blob构造、甚至fetch再转createObjectURL）都无法解除canvas污染状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
