canvas读取远程图片像素需满足跨域条件：img加crossorigin="anonymous"且服务端返回access-control-allow-origin；缩放采样+加权亮度公式0.299r+0.587g+0.114b计算主题色，并同步至css变量和meta theme-color。

Canvas getImageData 读取像素前必须处理跨域

直接用 ctx.getImageData() 读远程图片会立刻报 SecurityError: The canvas has been tainted by cross-origin data。这不是 JS 写错了，是浏览器强制拦截——哪怕图片能正常显示，只要没走 CORS 流程，getImageData 就一定失败。

必须同时满足两个条件：

• <img> 标签加 crossOrigin="anonymous"
• 服务端响应头包含 Access-Control-Allow-Origin: *（或具体域名）

本地开发时用 file:// 协议？100% 失败，必须起本地服务（如 npx serve）。SVG 图片不支持 crossOrigin，遇到就换 PNG/JPEG。

计算平均色时别用 (r + g + b) / 3

人眼对绿色最敏感，对蓝色最不敏感。(r + g + b) / 3 算出的灰度值会偏暗、失真，导致主题色发灰或发青。

真正反映视觉亮度的公式是加权亮度：0.299 * r + 0.587 * g + 0.114 * b。虽然你最终要的是 RGB 平均色，但采样阶段如果只取整图平均，大图容易卡顿，建议先缩放再算：

• 把原图绘制到一个宽高 ≤ 200px 的 canvas 上（用 ctx.drawImage(img, 0, 0, 200, 200)）
• 再调 getImageData(0, 0, 200, 200)，数据量降为原来的 1/10 以上
• 遍历时跳过 alpha 为 0 的像素（data[i+3] === 0），避免透明区域污染结果

把平均色同步到 CSS 变量和 meta theme-color

拿到 rgb(138, 92, 158) 这类值后，不能只改背景色——得让整个 UI 能响应式复用它。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐两步写法：

• 设 CSS 自定义属性：document.documentElement.style.setProperty("--theme-primary", "#8a5c9e")，然后在 CSS 里写 color: var(--theme-primary) 或 background: hsl(from var(--theme-primary) h s l)
• 动态更新 <meta name="theme-color">：document.querySelector('meta[name="theme-color"]').content = "#8a5c9e"，这对 PWA 和安卓地址栏生效

注意：CSS 变量名必须带双短横（--theme-primary），且不能用 rgb() 字符串直接赋值，得转成十六进制（rgbToHex(r, g, b) 函数很短，网上一搜就有）。

左侧/右侧分区取色时别硬切中线

轮播图里常需左半区、右半区分别取色来配渐变背景。但直接按 width / 2 切，遇到窄高图（比如 300×800）会导致左右采样区域过窄、噪点放大。

更稳的做法是固定采样宽度（如左右各取 150px 宽的竖条），再限制最小高度（比如至少 100px）：

• 左区坐标：ctx.getImageData(0, 0, 150, Math.min(height, 300))
• 右区坐标：ctx.getImageData(width - 150, 0, 150, Math.min(height, 300))
• 遍历这两块区域的 data，分别累加 R/G/B，再除以各自有效像素数

这样既避开边缘噪点，又防止极端比例下采样失效——这点容易被忽略，但线上轮播图出问题，八成栽在这儿。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！