不能纯靠CSS获取图片主色调，必须用JS读像素或CSS模糊近似；最终颜色值须通过setProperty注入CSS变量才能复用。Canvas getImageData报SecurityError需服务端配CORS头、JS中crossOrigin="anonymous"设在src前，且禁用file://协议；extract-colors库比手写Canvas更稳，支持Web Worker和降采样，返回颜色按显著性排序，[0]为主色；CSS变量名须以--开头且仅含字母数字短横线，禁用cssText避免清空其他变量；filter:blur()+scale仅为视觉近似，无法获取真实色值且性能开销大。
不能纯靠 CSS 获取图片主色调，必须用 JS 读像素或走 CSS 模糊近似；但最终颜色值必须通过 setProperty 注入 CSS 变量才能复用。
Canvas getImageData 被 SecurityError 阻断怎么办
直接 ctx.drawImage(img, 0, 0) 后调 ctx.getImageData() 必报 SecurityError: The canvas has been tainted by cross-origin data——这不是代码错，是浏览器铁律。
- 服务端必须返回
Access-Control-Allow-Origin: *（或指定域名），且 JS 中img.crossOrigin = "anonymous"要写在img.src赋值前 - 本地
file://协议下同样被污染，调试务必起服务（npx serve或 VS Code Live Server） - Nginx 反向代理是兜底方案：把
https://cdn.example.com/a.jpg代理成/proxy/a.jpg，彻底绕过跨域判定
用 extract-colors 库取色比手写 Canvas 更稳
比起自己遍历 getImageData 数据、过滤透明/过亮像素、统计众数，extract-colors 封装了采样降噪和中位切分逻辑，体积小、无依赖、支持 Web Worker。
- 安装：
npm install extract-colors，注意不是color-thief（打包环境易报require is not defined） - 必须等图片加载完成：
img.addEventListener('load', () => extractColors(img))，否则返回空数组 - 默认返回最多 5 种颜色，按显著性排序，
[0]就是主色；传{ quality: 5 }可提速（值越小采样越稀疏） - 不支持直接传 SVG 或
<canvas>元素，只认HTMLImageElement
CSS 变量必须用 setProperty 设置，别碰 cssText
把提取到的 #4a6fa5 或 rgb(74, 111, 165) 写进 document.documentElement.style.cssText，会清空所有已设变量，导致其他组件样式断裂。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
document.documentElement.style.setProperty('--bg-main', '#4a6fa5') - 变量名必须以两个短横线开头，且只含字母、数字、短横线，
--bg_main或--bg main均无效 - 若需兼容旧浏览器（IE 不支持 CSS 变量），得 fallback 到内联 style：
el.style.backgroundColor = color - 移动端要注意：大图建议先缩放至 320×240 再采样，否则
getImageData在低端机上卡顿明显
filter: blur() + scale 是纯 CSS 近似方案，但有硬伤
用 div::before { background: url(...); filter: blur(50px); transform: scale(3); } 确实能“糊”出主色，但它不是真提取，只是视觉欺骗。
- 模糊半径（如
50px）需手动调，不同尺寸/内容图效果差异大 - 滤镜性能开销高，页面多个同方案元素时，滚动/动画易掉帧
- 无法拿到具体颜色值，只能当背景层用，没法传给
border-color或文字色等其他属性 - 对纯色图、高对比图（如黑底白字截图）完全失效，容易糊成灰片
真正需要颜色值参与逻辑（比如生成暗色文字反衬、计算辅助色），这个方案就走不通——它只是个占位技巧，不是数据提取路径。
