Canvas读取远程图片像素前必须解决跨域问题，需同时满足img标签加crossorigin="anonymous"且服务端返回Access-Control-Allow-Origin头；本地file://协议下必报错，须启本地服务；SVG不支持crossorigin，应换PNG/JPEG或改用CSS方案。
Canvas读取图片像素前必须处理跨域问题
直接用 canvas.getContext('2d').getImageData() 读取远程图片会触发 SecurityError: The canvas has been tainted by cross-origin data。这不是代码写错了，而是浏览器强制限制。
解决方法只有两个：要么把图片放在同源服务器上；要么在 <img> 标签加 crossorigin="anonymous" 属性，并确保服务端返回 Access-Control-Allow-Origin 响应头。漏掉任一环节，getImageData 都会失败。
- 本地开发时用
file://协议加载图片，100% 触发跨域错误——必须起一个本地 server（如npx serve） - 即使加了
crossorigin，如果服务端没配 CORS 头，仍会静默失败（控制台可能只报错不提示原因） - SVG 图片不支持
crossorigin，遇到就换 PNG/JPEG 或改用 CSS 方案
用 Canvas 计算图片平均亮度的可靠公式
别用网上随手抄的 (r + g + b) / 3 —— 这是等权灰度，人眼对绿色最敏感，对蓝色最不敏感。正确做法是用加权亮度公式：0.299 * r + 0.587 * g + 0.114 * b，结果范围是 0–255。
实操建议：采样整张图太慢，尤其大图。改成随机采样 200–500 个像素点（避开边缘 10px 内），误差通常
立即学习“前端免费学习笔记（深入）”；
- 采样前先缩放图片到宽高 ≤ 200px，用
canvas.drawImage(img, 0, 0, width, height)，能显著提速 - 避免用
Uint8ClampedArray的forEach，改用传统for循环遍历像素数组，性能高 3–5 倍 - 如果图片含透明区域（alpha
class 切换比内联 style 更利于维护和动画
检测完亮度后，不要直接写 el.style.color = 'white'。用 el.classList.toggle('text-light', brightness 更稳妥。
好处很实在：CSS 变量、过渡动画、媒体查询、伪类样式都能正常生效。比如你写了 .text-light { color: #fff; transition: color 0.3s; }，内联 style 会强制覆盖 transition，而 class 不会。
- 提前在 CSS 里定义好两套文本类：
.text-dark和.text-light，别只写color，顺手加上text-shadow或background-clip增强可读性 - 如果文字容器本身有渐变/动效背景，加一层
will-change: contents防止 class 切换时重排重绘抖动 - 避免在循环中反复调用
classList.toggle，先算出最终状态再一次性 set
fallback 方案必须存在，且不能依赖 JS
Canvas 检测是异步的，页面首次渲染时文字已经画出来了。如果 JS 加载失败、执行卡住、或用户禁用 JS，文字就会永远是默认色（比如白底白字）。
所以 HTML 结构里得有兜底：<div class="hero" style="background-image: url(...)"> <p class="hero__title text-dark">标题</p> </div>。CSS 里用 .hero:not(.js-ready) .text-dark { color: #000; }，JS 成功后加 js-ready 类。
- 别用
document.write或innerHTML注入文字——破坏语义、影响 SEO、SSR 不兼容 - 服务端渲染（SSR）场景下，亮度计算必须后端做或预生成，前端 JS 只负责补全动态部分
- Canvas 检测耗时超过 100ms 就该加 loading 状态，否则用户会看到文字“闪白→闪黑→稳定”，体验极差
实际最难的部分不是算法，是让 Canvas 读图不崩、不卡、不被跨域拦住，以及确保 JS 失效时页面依然可用。这些细节没压住，再准的亮度公式也白搭。
