Canvas跨域图片需服务端开启CORS并前端设置img.crossOrigin='anonymous'，否则调用toDataURL()或getImageData()会因安全策略报“tainted canvas”错误；二者缺一不可。
Canvas中加载跨域图片后调用toDataURL()或getImageData()会触发“ tainted canvas”错误，根本原因是浏览器的安全策略阻止从不同源读取像素数据。解决的关键在于服务端配合开启CORS，而非前端绕过限制。
服务端配置Access-Control-Allow-Origin
图片资源所在的服务器必须返回正确的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'); - 若需支持任意来源（仅限开发或公开CDN），可用
*，但注意*不兼容带凭证的请求（如cookie）
HTML中设置img.crossOrigin属性
仅服务端支持还不够，前端创建<img alt="HTML5中Canvas处理跨域图片受限的解决方法" >时必须显式启用CORS请求：
- 正确写法：
img.crossOrigin = 'anonymous';（注意不能写成'use-credentials'除非服务端也返回Access-Control-Allow-Credentials: true） - 必须在设置
src前赋值，否则无效 - 示例：
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://cdn.example.com/photo.jpg';
验证是否生效
加载完成后可简单检测是否仍被污染：
立即学习“前端免费学习笔记（深入）”；
- 绘制到canvas后，调用
ctx.getImageData(0,0,1,1)不报错 → 说明未污染 - 或检查
canvas.toDataURL()能否正常返回data URL - 若仍报错，打开开发者工具Network面板，查看图片响应头是否包含
Access-Control-Allow-Origin且值匹配当前域名
替代方案（无服务端权限时）
当无法修改图片服务器配置，可考虑以下折中方式：
- 通过同源代理中转：用自己后端接口请求远程图片，再返回给前端（增加延迟和服务器负载）
- 使用支持CORS的CDN或图床（如Cloudinary、ImgBB等公开服务通常默认开启）
- 纯前端无法真正绕过限制——任何伪造header、base64转换或blob构造都无法解除污染状态
核心原则是：跨域图片能否用于像素操作，完全取决于服务端是否授权 + 前端是否正确发起CORS请求。两者缺一不可。
