link标签的crossorigin属性对图片CDN跨域完全无效，因其不支持as="image"，仅对stylesheet、font、script生效；图片跨域必须用<img crossorigin>并配服务端CORS响应头。
link 标签的 crossorigin 属性对图片 CDN 跨域加载**完全无效**，它压根不支持图片资源。
你不能靠 link 加 crossorigin 让 CDN 上的图片变成可读像素、绕过 canvas 污染、或替代 img 的跨域配置。
为什么 link 的 crossorigin 对图片没用
浏览器只在特定 rel 和 as 组合下识别 crossorigin：
-
rel="stylesheet"→ 生效 -
rel="preload" as="font"或as="script"→ 生效 -
rel="preload" as="image"→ 被忽略，不触发 CORS 请求，也不影响后续img加载行为 -
rel="icon"、rel="prefetch"等 → 属性静默丢弃
W3C 规范和 Chrome/Firefox/Safari 均不把 as="image" 列为支持 CORS 的资源类型。写了等于没写。
link rel="preload" as="image" 会提前加载图片吗
会，但只是普通非 CORS 预加载：
- 它能触发浏览器提前发起 HTTP 请求，提升加载速度
- 但不会带
Origin请求头，服务端不会返回Access-Control-Allow-Origin - 后续
img标签仍需单独配crossorigin="anonymous"，否则 canvas 依然报SecurityError - 如果 CDN 没开 CORS，预加载本身可能失败（Network 面板显示 403 或 pending），但页面不会报错，容易误判成功
真正能让图片进 canvas 的唯一方式
必须用 img 标签，并满足两个硬性条件：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
<img src="https://cdn.example.com/photo.jpg" crossorigin="anonymous">（注意拼写是crossorigin，不是crossOrigin或crossorigin） - CDN 必须返回响应头：
Access-Control-Allow-Origin: *或精确匹配当前域名 - 动态创建时别漏掉：
const img = new Image(); img.crossOrigin = 'anonymous';（HTML 属性对 JS 实例无效） - CDN 如 Cloudflare、S3、Imgix 默认关闭 CORS，需手动在 bucket / behavior / rule 中开启并透传响应头
常见踩坑组合及现象
以下写法看似合理，实际都会导致 canvas 污染或请求失败：
-
<link rel="preload" as="image" href="..." crossorigin="anonymous">→ 浏览器忽略crossorigin，预加载无 CORS 效果 -
<link rel="icon" href="..." crossorigin>→ favicon 加载逻辑完全不受影响，属性白加 -
<img crossorigin src="...">（没写值）→ 多数浏览器按anonymous处理，但部分 CDN 会拒绝空值，结果仍是污染 - 服务端返回
Access-Control-Allow-Origin: *却配了crossorigin="use-credentials"→ 浏览器直接拒绝响应，Network 里看不到完整 headers
最易被忽略的一点：图片 URL 含 query 参数（如 ?v=2.1）时，CDN 或 Nginx 缓存若未透传 CORS 响应头，会导致缓存命中但 header 缺失——此时 img 已加载完成，canvas 却突然被污染，排查极难。
