可通过Canvas getImageData读取图像像素并计算RGB平均值作为网页主题色，需确保图像加载完成、处理跨域限制（如crossOrigin="anonymous"），并优化采样（降采样或随机采样）以提升性能。
可以通过 Canvas 的 getImageData 方法读取图像像素数据，计算 RGB 通道的平均值，再将该色值应用为网页主题色（如 :root CSS 变量或 <meta name="theme-color">）。整个过程需注意跨域限制、图像加载时机和色彩感知优化。
1. 加载图像并绘制到 Canvas 上
必须确保图像已完全加载，且无跨域问题（否则 getImageData 会报错）。推荐使用 crossOrigin="anonymous"（前提是服务器支持 CORS）：
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "/path/to/image.jpg";
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
// 后续获取像素数据
};
2. 采样像素并计算平均 RGB 值
全量读取高分辨率图像可能卡顿，建议降采样（如缩放到 100×100 再读取）或随机采样关键区域（如中心 20%）。计算时跳过透明像素（alpha
- 用
ctx.getImageData(0, 0, w, h)获取像素数组（每 4 个值为 R,G,B,A） - 遍历所有像素，累加非透明像素的 R/G/B 值，计数有效像素数
- 取平均：
avgR = sumR / count，同理 G/B，结果转为十六进制色值（如#8a5c9e）
3. 应用为网页主题色
有两种主流方式，兼顾视觉与兼容性：
立即学习“前端免费学习笔记（深入）”；
- 设置 CSS 自定义属性：
document.documentElement.style.setProperty("--primary-color", "#8a5c9e")，配合:root { --primary-color: #000 }在 CSS 中复用 - 动态更新 meta 标签（影响浏览器地址栏/安卓 PWA）：
document.querySelector('meta[name="theme-color"]').content = "#8a5c9e"
4. 提升色彩实用性的小技巧
纯平均色常偏灰或不协调，可进一步优化：
- 转换到 HSL 空间，提升饱和度（
s *= 1.3）、微调亮度（避免过暗/过亮）后再转回 RGB - 用中位数代替平均值（对异常色点更鲁棒），或聚类（如 K-means 取主色）
- 为深色模式提供互补色：若主色明度
