HTML5 中怎么用 canvas 提取图片的亮度矩阵计算图像的整体色调-H5教程-PHP中文网

html5中通过canvas提取图片亮度矩阵并分析整体色调的核心步骤是：绘制图像→读取rgba像素→用itu-r bt.601公式计算亮度l→统计亮度均值判断明暗倾向→结合hsl色相加权平均（过滤低饱和/过暗像素）估算冷暖主色调。

html5 中怎么用 canvas 提取图片的亮度矩阵计算图像的整体色调

在 HTML5 中，用 <canvas></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  r + 0.587  g + 0.114 * b;
brightness.push(l);
}
// brightness[] 就是整图的亮度矩阵（一维数组，按行优先）
};
img.src = 'photo.jpg';</p>

2. 从亮度矩阵推导整体明暗倾向

亮度值范围是 0–255。统计均值、中位数、标准差，可判断图像基础明暗特性：

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

平均亮度：偏暗（低曝光/阴郁感）
平均亮度 ∈ [85, 170]：中性曝光（视觉舒适区）
平均亮度 > 170：偏亮（高调/轻盈感）
标准差小（如：对比度低，色调平缓；大（> 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  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 品红调