img标签加crossorigin="anonymous"本身不解决图片显示问题，仅允许JS安全读取跨域图片内容；若服务端未返回Access-Control-Allow-Origin响应头，canvas绘图后仍会报“tainted canvas”错误。
img 标签加 crossorigin 属性本身不会让跨域图片“显示出来”，它只影响 JS 能否安全读取图片内容——比如绘入 canvas、调用 toDataURL() 或 getImageData()。没配对的服务端响应头，这个属性就等于白设。
为什么设置了 crossorigin="anonymous" 还报 “tainted canvas” 错误
这是最常踩的坑：前端写了 crossorigin，但服务端没返回 Access-Control-Allow-Origin 响应头。浏览器会发一个带 Origin 请求头的请求，但如果响应里没有匹配的 Access-Control-Allow-Origin，这次请求就被当作普通跨域请求处理——img 依然能显示，但 Canvas 一旦画进去，立刻被污染。
关键点：
-
crossorigin必须在设置src之前赋值，写成img.src = '...'; img.crossOrigin = 'anonymous';就无效 - 服务端必须对图片资源（不只是 HTML）返回
Access-Control-Allow-Origin: *或具体域名 - 如果图片路径带查询参数（如
?v=1.0），缓存策略或 CDN 可能没透传 CORS 头，要检查实际响应 - 预检请求（OPTIONS）也要返回相同 CORS 头，否则某些带认证头的请求会失败
crossorigin="anonymous" 和 crossorigin="use-credentials" 怎么选
绝大多数场景只用 anonymous；use-credentials 是特例，不是升级版。
立即学习“前端免费学习笔记（深入）”；
区别很实在：
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
-
crossorigin="anonymous"→ 请求不带 Cookie、Authorization 等凭据，服务端只需返回Access-Control-Allow-Origin: *（不能是*+Access-Control-Allow-Credentials: true共存） -
crossorigin="use-credentials"→ 请求会带上 Cookie 和认证头，服务端必须返回Access-Control-Allow-Origin: https://your-site.com（不能为*）且Access-Control-Allow-Credentials: true - 写错值（比如
crossorigin="xyz"或漏写）→ 浏览器按非 CORS 模式发起请求 → 图片能显示，但 Canvas 必然污染
background-image 跨域时 crossorigin 完全无效
CSS 的 background-image 不支持 crossorigin 属性，这是规范限制，不是写法问题。
后果很隐蔽：
- 图片可能静默不加载（控制台无错误，只显示空白背景）
- 即使显示了，后续用
getComputedStyle(el).backgroundImage取值可能为空 - 更关键的是：一旦你用
canvas截图或分析该元素，仍会触发 “tainted canvas” 错误
可行解法只有两个：
- 后端给图片资源配好
Access-Control-Allow-Origin响应头（推荐） - 改用
<img crossorigin="anonymous" alt="HTML中img标签的crossorigin属性处理跨域图片的方法" >+object-fit模拟背景行为（需手动对齐background-position/repeat效果）
多个 <img alt="HTML中img标签的crossorigin属性处理跨域图片的方法" > 加载同一张跨域图片时的缓存陷阱
如果第一个 <img alt="HTML中img标签的crossorigin属性处理跨域图片的方法" > 没设 crossorigin，它先加载成功了，那第二个设了 crossorigin="anonymous" 的 <img alt="HTML中img标签的crossorigin属性处理跨域图片的方法" > 会直接从缓存取图——但缓存里这张图没带 CORS 元数据，浏览器仍判定为“非 CORS 加载”，Canvas 绘制后照样污染。
所以：
- 所有用到该图片的
<img alt="HTML中img标签的crossorigin属性处理跨域图片的方法" >标签，只要后续要进 Canvas，就必须统一加crossorigin="anonymous" - 避免混用：不要一部分地方用
<img alt="HTML中img标签的crossorigin属性处理跨域图片的方法" >直接展示，另一部分用同一个 URL 进 Canvas，除非全都配对 - 开发时可临时加时间戳（
src="xxx.jpg?t="+Date.now()）绕过缓存验证配置是否生效
真正卡住人的从来不是怎么写 crossorigin，而是服务端响应头没配对、缓存干扰、或者误以为 background-image 也能用它——这些地方一漏，JS 报错就毫无商量余地。
