crossorigin属性仅影响canvas读取像素，不影响图片显示；设为anonymous或use-credentials需服务端严格匹配响应头，否则canvas被污染。
crossorigin 属性不控制图片能否显示，只决定 Canvas 能否读像素
加了 crossorigin="anonymous" 的 <img> 标签，图片照样能正常显示——这和跨域图片“能不能加载出来”完全无关。它唯一作用是告诉浏览器：“这张图我要拿去 canvas 里操作，所以请用 CORS 流程请求，并允许 JS 读取它的像素数据”。如果没设、设错、或服务端没配对响应头，ctx.drawImage(img, ...) 一执行，canvas 就立刻被标记为 tainted，后续调用 toDataURL() 或 getImageData() 全部抛 SecurityError: The canvas has been tainted by cross-origin data。
必须在设置 src 前赋值 crossOrigin，且拼写是 crossOrigin（JS 中）
动态创建 Image 实例时，顺序错误是最隐蔽的坑：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
-
const img = new Image(); img.src = 'https://cdn.example.com/photo.jpg'; img.crossOrigin = 'anonymous';→ 无效，浏览器已按普通跨域请求发出，crossOrigin被忽略 - 正确写法：
const img = new Image(); img.crossOrigin = 'anonymous'; img.src = 'https://cdn.example.com/photo.jpg'; - HTML 中等效写法是
<img crossorigin="anonymous" src="...">，注意属性名是crossorigin（全小写、无驼峰），但 JS 对象属性是crossOrigin（大 O）
crossorigin="anonymous" 和 "use-credentials" 的鉴权边界非常硬
这两个值不是“低配/高配”，而是完全不同的鉴权路径，服务端配置必须严格匹配：
-
crossorigin="anonymous"：请求不带 Cookie、Authorization 等凭据；服务端只需返回Access-Control-Allow-Origin: *或精确域名（如https://your-site.com） -
crossorigin="use-credentials"：请求携带 Cookie 和认证头；服务端必须同时返回Access-Control-Allow-Origin: https://your-site.com（不能是*）和Access-Control-Allow-Credentials: true - 写成
crossorigin="use-credentials"但服务端只返回Access-Control-Allow-Origin: *→ 浏览器直接拒绝响应体，Network 面板里可能只看到 failed 或 0 status - 写成
crossorigin="xyz"或漏写值（<img crossorigin src="...">）→ 浏览器当没这个属性处理，Canvas 必然污染
file:// 协议下 crossorigin 完全失效，本地预览必须走 HTTP
双击 HTML 文件或用 VS Code Live Server 启动页面时，若图片来自第三方 CDN，即使写了 crossorigin="anonymous"，也大概率失败：
-
file://下 Origin 是null，绝大多数服务端不会返回Access-Control-Allow-Origin: null - Live Server 虽有 HTTP，但图片源（如 OSS、S3）若未配置 CORS 规则，请求根本收不到有效响应头，Network 面板里可能连完整响应都看不到
- 验证是否真生效：图片加载完成后，在 console 执行
canvas.getContext('2d').getImageData(0,0,1,1)；不报错才说明未污染 - 开发阶段临时绕过：用
fetch+createObjectURL中转，或起本地代理注入 CORS 头；但这些方案不能上生产
Access-Control-Allow-Origin —— 这个头必须存在、值必须合法、且不能被缓存策略或 CDN 配置意外剥离。
