HTML5中通过canvas提取图片亮度矩阵并分析整体色调的核心步骤是：绘制图像→读取RGBA像素→用ITU-R BT.601公式计算亮度L→统计亮度均值判断明暗倾向→结合HSL色相加权平均（过滤低饱和/过暗像素）估算冷暖主色调。
在 HTML5 中，用 <canvas> 提取图片亮度矩阵并计算整体色调，核心是：**将图像绘制到 canvas 上 → 读取像素数据 → 转换为亮度值（如灰度）→ 统计分布或加权平均 → 推导主色调倾向（冷/暖、明/暗、偏色）**。这不是直接“提取色调”，而是通过亮度与色度信息间接分析。
1. 获取图像像素数据并转为亮度值
Canvas 的 getImageData() 返回 RGBA 数组，每个像素占 4 个连续字节。亮度常用加权灰度公式（ITU-R BT.601）：L = 0.299 × R + 0.587 × G + 0.114 × B
该公式更符合人眼感知，比简单平均更准确。
示例代码片段：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
<p>const brightness = [];
for (let i = 0; i < data.length; i += 4) {
const r = data[i], g = data[i+1], b = data[i+2];
const l = 0.299 <em> r + 0.587 </em> g + 0.114 * b;
brightness.push(l);
}
// brightness[] 就是整图的亮度矩阵（一维数组，按行优先）
};
img.src = 'photo.jpg';</p>2. 从亮度矩阵推导整体明暗倾向
亮度值范围是 0–255。统计均值、中位数、标准差，可判断图像基础明暗特性：
- 平均亮度 < 85：偏暗（低曝光/阴郁感）
- 平均亮度 ∈ [85, 170]：中性曝光（视觉舒适区）
- 平均亮度 > 170：偏亮（高调/轻盈感）
- 标准差小（如 < 30）：对比度低，色调平缓；大（> 60）则反差强，可能有明确光影结构
3. 结合色度信息估算主色调冷暖倾向
仅靠亮度无法判断“红/蓝/黄”，需补充色度分析。常用方法是计算每个像素的 a* 和 b*（CIELAB 空间），但浏览器不原生支持；更实用的是用 HSL 色相（Hue）加权平均：
立即学习“前端免费学习笔记（深入）”；
- 将每个像素 RGB 转 HSL，提取 H 值（0–360°，红=0/360，绿=120，蓝=240）
- 按亮度 L 或饱和度 S 加权：避免暗/灰像素干扰主色判断（例如：纯黑像素 H 无意义，应降权）
- 对 H 值做环形平均（避免 359° 和 1° 平均得 180° 的错误），可用向量合成法
简化的非环形近似（适用于色调较集中的图）：
let hueSum = 0, weightSum = 0;
for (let i = 0; i < data.length; i += 4) {
const r = data[i], g = data[i+1], b = data[i+2];
const l = 0.299*r + 0.587*g + 0.114*b;
const s = Math.max(r,g,b) - Math.min(r,g,b); // 简化饱和度
if (s > 20 && l > 30) { // 过滤低饱和/过暗像素
const h = rgbToHue(r,g,b); // 自定义转换函数
hueSum += h * (s * (255-l)/255); // 饱和度高、亮度适中者权重高
weightSum += s * (255-l)/255;
}
}
const avgHue = hueSum / weightSum;
// avgHue ∈ [0,360]：≈0/360 红调，≈120 绿调，≈240 蓝调，≈60 黄调，≈300 品红调
4. 实用建议与注意事项
-
跨域限制：加载外链图片时需设置
img.crossOrigin = 'anonymous'，否则getImageData()抛错 - 性能优化：高清图像素多，可先缩放至 512×512 再采样，误差可接受
- 忽略 alpha：透明区域（A=0）通常不参与色调计算，绘制前确保背景为白色或统一色
- 色调 ≠ 亮度：一张蓝调图可以很亮（天光）也可以很暗（夜景），需分开分析再综合（例如：“高亮度+高蓝度” → 清冷感）
