根本原因是浏览器阻止未声明跨域策略的图片被读取像素数据；必须在img.src赋值前设置img.crossOrigin='anonymous'，且服务端须返回Access-Control-Allow-Origin头，file://协议需启本地服务器。
canvas drawImage 跨域图片报错 SecurityError: The operation is insecure. 怎么配
根本原因是浏览器阻止了未声明跨域策略的图片被读取像素数据。即使图片能正常显示，只要没配对 crossorigin，ctx.drawImage() 后调用 ctx.getImageData() 或导出 toDataURL() 就会触发这个错误。
关键不是“加不加 crossorigin”，而是加得对不对——它必须和图片资源服务器返回的 CORS 响应头匹配，否则等效于没加。
-
crossorigin="anonymous"：最常用，要求服务端返回Access-Control-Allow-Origin: *或明确包含当前源；不带凭据（cookie、auth header） -
crossorigin="use-credentials"：需服务端返回Access-Control-Allow-Origin: https://your-site.com（不能是*）且含Access-Control-Allow-Credentials: true - 不写
crossorigin属性，或写成crossorigin=""，等价于anonymous，但语义不清，不推荐
img.src 赋值前还是赋值后设置 crossorigin？
必须在设置 img.src 之前设置 crossorigin。DOM 规范规定：一旦 src 被赋值，浏览器立即开始加载；若此时 crossorigin 还没设，就按“非跨域”模式发起请求，后续再补也无效。
常见翻车写法：
立即学习“前端免费学习笔记（深入）”；
const img = new Image(); img.src = 'https://cdn.example.com/photo.jpg'; // ❌ 此时已发请求，crossorigin 失效 img.crossOrigin = 'anonymous';
正确写法：
const img = new Image();
img.crossOrigin = 'anonymous'; // ✅ 必须放前面
img.src = 'https://cdn.example.com/photo.jpg';
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
CDN 或第三方图床没开 CORS 怎么办
如果图片源（比如某些老 CDN、微信公众号图片、微博图床）根本不支持 CORS，crossorigin 再怎么配也没用——服务器不返回 Access-Control-Allow-Origin，浏览器直接拦截。
此时只有两个现实选项：
- 换图源：优先选明确支持 CORS 的图床（如 Cloudflare Images、ImgBB、GitHub raw 链接）
- 走代理：自己搭一个简单反代接口（如 Express +
cors中间件），把图片 URL 透传过去并注入响应头，前端请求自己的域名 - 放弃像素操作：只用
drawImage渲染，不调getImageData、toDataURL、createPattern等读像素的 API —— 这类操作不会触发安全检查
为什么本地 file:// 协议下 crossorigin 总失效
因为 file:// 没有 origin 概念，浏览器将所有本地文件视为不同源，CORS 机制本身就不适用。此时无论怎么设 crossorigin，图片加载后仍会被标记为“污染（tainted）”，任何读像素操作都报错。
解决办法只有一个：用本地 HTTP 服务打开页面（如 npx http-server、VS Code Live Server 插件、Python python -m http.server）。不要双击 HTML 文件运行。
顺带一提：canvas 元素自身没有 crossorigin 属性，它只作用于 img、video、link 等资源载入环节——这点容易误查文档。
