图片直方图

RGB/亮度直方图

420 次访问
IMAGE HISTOGRAM

图片直方图分析

RGB 三通道 + 亮度直方图 · 曝光分析 · 摄影后期

📊

拖入或点击选择图片

直方图阅读:X 轴 = 亮度 (0-255),Y 轴 = 像素数。

理想曝光:直方图分布均匀,覆盖整个范围。偏左 = 欠曝 / 偏右 = 过曝 / 集中中央 = 对比度低。

RGB 通道:红绿蓝单独分布。某通道偏向一边 = 该色偏。可指导白平衡校正。

关于本工具

了解工具定位 · 使用场景 · 对比优势

上传一张图片,立即生成 RGB 和亮度两种直方图,直观展示各通道像素分布与曝光情况。摄影师检查曝光是否溢出、设计师验证色彩平衡、开发者分析图像预处理效果,无需切换软件。所有计算在浏览器内完成,图片不上传服务器。

使用场景

📷

摄影曝光校正

摄影师在后期处理时,发现某张逆光人像暗部细节丢失、高光溢出。通过直方图快速定位像素集中在最左(欠曝)和最右(过曝)区域,中间调空洞。根据直方图形态调整曝光补偿或曲线,将暗部像素向右推移、高光向左回拉,使直方图呈均匀山形分布,恢复细节层次,避免凭肉眼反复试错。

🎨

设计稿色阶检查

UI 设计师交付 App 界面切图前,用直方图检测图片是否出现色阶断裂(像素在某个亮度级别突然缺失,表现为直方图出现竖直空白条)。若发现断层,说明图片经过过度压缩或色深不足,需重新导出 16 位色深版本,确保渐变背景在用户设备上平滑过渡,避免出现肉眼可见的色带。

🖨️

印刷输出预检

平面设计师准备将海报送印,担心暗部区域在印刷时糊成一团。用 RGB 直方图分别查看红、绿、蓝通道:若某个通道在暗部(0-30 亮度区间)像素堆积过多,说明该区域颜色过深,印刷时易丢失细节。根据直方图提示降低该通道曲线暗部斜率,使暗部像素分散到 30-60 亮度范围,保证印刷成品层次分明。

🔬

医学图像对比

放射科医生分析两张不同设备拍摄的 X 光片,肉眼难以判断哪张曝光更标准。分别导入直方图工具,对比两张图像的亮度分布范围:标准曝光图像直方图应覆盖 0-255 全亮度区间且峰值居中;过暗图像直方图集中在 0-80 区域,过亮图像集中在 180-255 区域。据此选择曝光正确的图像用于诊断,或对欠佳图像做后期亮度拉伸。

🎞️

视频帧统一调色

视频剪辑师处理多机位素材,A 机位画面偏冷(蓝通道像素多),B 机位偏暖(红通道像素多)。用直方图分别查看两机位 RGB 通道的像素分布峰值位置:A 机蓝色峰值在 180,B 机红色峰值在 200。调整 B 机位的色温曲线,将其红色峰值降至 180 附近,使两机位直方图形态一致,实现无缝切换,避免观众感知到色温跳变。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A: Photoshop传统方法
数据隐私纯浏览器,不上传任何数据需安装客户端,文件本地处理依赖第三方冲印店或扫描仪操作
处理速度1 秒内3-10 秒(需启动软件)数小时至数天
离线可用支持(浏览器本地运行)支持(已安装客户端)支持
操作门槛拖拽即用,零学习成本需学习图层、通道等专业操作需掌握暗房或扫描仪操作技能
平台依赖任何现代浏览器(Win/Mac/Linux)仅限 Windows/macOS依赖物理设备
输出格式实时显示直方图,可截图保存可导出为图像文件或数据仅能目视观察,无数字输出

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 上传或拖入一张 JPG/PNG/WebP 图片(单张 ≤ 20MB)
  2. 选择直方图模式:RGB(三通道叠加)或亮度(Y 通道)
  3. 查看直方图:横轴 0-255 表示亮度/色阶,纵轴表示像素数量
  4. 鼠标悬停或点击直方图区域,读取该色阶的精确像素数
  5. 点击「导出」保存直方图为 PNG 图片,或「复制数据」粘贴为 CSV

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
一张包含蓝天、绿树、红色花朵的风景照片(RGB 模式)RGB 直方图:红色通道在 180-255 区间有峰值(花朵),绿色通道在 50-150 区间有峰值(树叶),蓝色通道在 150-230 区间有峰值(天空)。亮度直方图:整体分布偏右,峰值在 150-200 区间。典型场景:分析自然风光照片的色彩分布
一张纯白色图片(所有像素 RGB=255,255,255)RGB 直方图:红、绿、蓝三通道均在 255 处出现单根竖线(峰值)。亮度直方图:仅在 255 处出现单根竖线。边界 case:纯色极端值,验证直方图是否归一化
一张纯黑色图片(所有像素 RGB=0,0,0)RGB 直方图:红、绿、蓝三通道均在 0 处出现单根竖线(峰值)。亮度直方图:仅在 0 处出现单根竖线。边界 case:与纯白对称的极端值测试
一张曝光不足的夜景照片(整体偏暗)RGB 直方图:三个通道的像素主要分布在 0-50 的低亮度区间,峰值集中在 10-30 附近。亮度直方图:波形紧贴左侧,右侧 200-255 区间几乎无像素。典型场景:诊断照片是否欠曝
一张过曝的雪景照片(整体偏亮)RGB 直方图:三个通道的像素主要分布在 200-255 的高亮度区间,峰值集中在 240-255 附近,255 处可能有截断。亮度直方图:波形紧贴右侧,左侧 0-50 区间几乎无像素。典型场景:诊断照片是否过曝,且高光细节丢失
一张高对比度的黑白人像照片(RGB 模式)RGB 直方图:红、绿、蓝三通道波形几乎完全重合,像素分布在 0-30 和 220-255 两个分离的区间,中间 50-200 区间像素极少。亮度直方图:呈现典型的双峰分布。易错 case:黑白照片 RGB 三通道重合,新手误以为偏色
一张带有严重偏色的照片(整体偏蓝,如白平衡错误的水下照片)RGB 直方图:蓝色通道整体右移(峰值在 180-255),红色和绿色通道整体左移(峰值在 50-100)。亮度直方图:分布正常,但无法直接反映偏色。典型场景:通过 RGB 通道偏移诊断白平衡问题
一张尺寸为 1x1 像素的图片(单像素)RGB 直方图:红、绿、蓝三通道分别在对应像素值的亮度级上出现单根竖线。亮度直方图:在对应亮度级上出现单根竖线。边界 case:极小尺寸图片,验证直方图算法稳定性

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 把彩色图当灰度图看亮度直方图

错误
上传一张纯色(如#FF0000红)图片,看到亮度直方图集中在右侧,以为图片过曝
修复
先看RGB直方图,确认红通道峰值在右侧;亮度直方图对纯红会显示中等亮度(约54/255),不是过曝

亮度直方图是RGB三通道加权(0.299R+0.587G+0.114B),纯红亮度只有54,不是255。只看亮度直方图会误判彩色图片的曝光

2. 把直方图左右两侧的'山峰'当成噪点

错误
看到直方图左右两端有凸起,认为是传感器噪点,准备降噪
修复
检查原图:如果是夜空/纯黑背景,左侧凸起是正常暗部;如果是雪景/白墙,右侧凸起是正常亮部

直方图两端凸起可能是场景本身的暗部/亮部像素多,不一定是噪点。噪点通常表现为离散的孤立尖峰,而非连续的山峰

3. 用JPEG图片分析直方图时忽略压缩伪影

错误
用JPEG格式的星空照片分析直方图,看到多个细小的尖峰,以为是真实像素分布
修复
改用PNG/TIFF格式,或先确认JPEG质量≥95;如果必须用JPEG,忽略那些等间距的微小尖峰

JPEG压缩会在8x8块边界产生量化伪影,在直方图上表现为等间距的梳状尖峰。这些不是原始像素分布

4. 把直方图'断层'当成数据损坏

错误
看到直方图中有明显的空隙(如亮度值100-110之间没有像素),认为图片文件损坏
修复
检查原图是否经过调色/滤镜处理;如果是后期处理的图片,断层是正常的色调分离现象

调色时压缩色阶会导致某些亮度值没有像素,形成直方图断层。这是后期处理的正常结果,不是文件损坏

5. 用直方图判断图片'是否清晰'

错误
看到直方图分布范围广(0-255都有像素),认为图片清晰度高
修复
清晰度应看边缘检测或拉普拉斯方差;直方图分布广只能说明对比度高,不能说明清晰度

直方图只统计亮度分布,不包含空间信息。一张高斯模糊的图片也可以有全范围的直方图分布

6. 把RGB直方图的'溢出'当成过曝

错误
看到红色通道直方图右侧顶到255边界,认为红色通道过曝
修复
检查其他通道:如果红通道溢出但绿蓝通道正常,可能是场景中本来就有纯红物体(如红灯、红花)

单通道溢出不一定是过曝,可能是场景中该颜色的高饱和度区域。真正的过曝是三个通道同时在255处溢出

7. 用浏览器截图分析直方图时忽略色彩管理

错误
截取浏览器中显示的图片,上传分析直方图,看到与原始图片不同的分布
修复
直接上传原始图片文件,不要用截图;如果必须用截图,在sRGB色彩空间下操作

浏览器截图会经过显示器的色彩管理(可能改变像素值),且截图本身是PNG格式,会引入新的压缩

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

L = 0.299R + 0.587G + 0.114B

变量说明

  • L — 像素亮度值(0-255)
  • R — 红色通道值(0-255)
  • G — 绿色通道值(0-255)
  • B — 蓝色通道值(0-255)

示例

某像素 RGB=(100, 150, 200),代入公式:L = 0.299×100 + 0.587×150 + 0.114×200 = 29.9 + 88.05 + 22.8 = 140.75,取整为 141。该像素亮度值约 141(偏亮),对应直方图横坐标 141 处计数 +1。

适用范围

基于 ITU-R BT.601 标准(CCIR 601),适用于 sRGB 色彩空间的 8 位图像。对广色域(Adobe RGB / DCI-P3)或 HDR 图像,需改用 ITU-R BT.2020 系数,否则亮度分布有偏差。

原理图

图片直方图生成流程(纯浏览器端)用户上传图片Canvas 读取像素(getImageData)统计各通道亮度/R/G/B在浏览器内绘制直方图(Canvas 2D)并展示无需上传服务器,图片数据不离开本地
用户输入 本地处理 统计计算 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import numpy as np

# 打开图片并转为 RGB 模式
img = Image.open("photo.jpg").convert("RGB")
pixels = np.array(img)

# 计算 RGB 各通道直方图(256 bins)
hist_r, _ = np.histogram(pixels[:,:,0], bins=256, range=(0,255))
hist_g, _ = np.histogram(pixels[:,:,1], bins=256, range=(0,255))
hist_b, _ = np.histogram(pixels[:,:,2], bins=256, range=(0,255))

# 亮度直方图:加权灰度公式 Y = 0.299R + 0.587G + 0.114B
luminance = np.dot(pixels[...,:3], [0.299, 0.587, 0.114]).astype(np.uint8)
hist_lum, _ = np.histogram(luminance, bins=256, range=(0,255))

print("R 直方图(前10个bin):", hist_r[:10])
print("亮度直方图(前10个bin):", hist_lum[:10])
package main

import (
	"fmt"
	"image"
	_ "image/jpeg"
	"os"
)

func main() {
	f, _ := os.Open("photo.jpg")
	defer f.Close()
	img, _, _ := image.Decode(f)
	bounds := img.Bounds()

	var histR, histG, histB, histL [256]int
	for y := bounds.Min.Y; y < bounds.Max.Y; y++ {
		for x := bounds.Min.X; x < bounds.Max.X; x++ {
			r, g, b, _ := img.At(x, y).RGBA()
			r8, g8, b8 := r>>8, g>>8, b>>8
			histR[r8]++
			histG[g8]++
			histB[b8]++
			// 亮度:0.299R + 0.587G + 0.114B
			lum := uint8((299*uint32(r8) + 587*uint32(g8) + 114*uint32(b8)) / 1000)
			histL[lum]++
		}
	}
	fmt.Println("R直方图前10个bin:", histR[:10])
	fmt.Println("亮度直方图前10个bin:", histL[:10])
}
// 浏览器端:使用 Canvas API 计算直方图
const img = new Image();
img.src = 'photo.jpg';
img.onload = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  const histR = new Uint32Array(256);
  const histG = new Uint32Array(256);
  const histB = new Uint32Array(256);
  const histL = new Uint32Array(256);
  
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i+1], b = data[i+2];
    histR[r]++;
    histG[g]++;
    histB[b]++;
    // 亮度:0.299R + 0.587G + 0.114B
    const lum = Math.round(0.299*r + 0.587*g + 0.114*b);
    histL[lum]++;
  }
  
  console.log('R直方图前10个bin:', histR.slice(0, 10));
  console.log('亮度直方图前10个bin:', histL.slice(0, 10));
};

常见问题

7 个高频疑问

直方图上的横轴和纵轴分别代表什么?怎么看?
横轴代表亮度(0-255),从左到右从纯黑到纯白;纵轴代表像素数量,越高说明该亮度级别的像素越多。以一张正常曝光的风景照为例,直方图通常呈中间高两边低的山峰状:左侧黑场区无明显堆积说明不死黑,右侧白场区无截断说明不过曝。如果直方图整体偏左(暗部堆积),说明画面偏暗;偏右则偏亮。RGB 模式下,红绿蓝三通道会分别显示,可单独看某个颜色的分布。
为什么我用手机拍的照片,直方图看起来和相机拍的差别很大?
手机照片通常经过机内算法处理(HDR 合成、自动对比度增强、锐化等),这些处理会改变原始像素的亮度分布。比如 HDR 模式会压低高光、提亮暗部,导致直方图中间区域更饱满、两端更平坦。相机(尤其是 RAW 格式)保留更多原始数据,直方图往往更接近传感器的真实曝光分布。此外,手机屏幕色域和亮度设置也会影响肉眼感知,但直方图只读文件数据,不受屏幕影响。
直方图显示我的图片没有黑色(左侧空一大截),是坏图吗?
不一定。左侧空一大截说明画面中最暗的像素也远高于纯黑(亮度值 > 0),常见于雾天拍摄、过曝的逆光照片或高调摄影(如雪景、白墙静物)。如果图片本身是正常内容但直方图左侧空且右侧溢出(255 处有竖线),说明过曝了,暗部细节丢失。如果是故意的高调风格(如日系小清新),左侧留空是正常的。可以结合图片主体判断:若雪景直方图偏右且无溢出,属于正常范围。
这个工具支持哪些图片格式?最大可以上传多大的图片?
支持 JPEG、PNG、WebP、BMP、GIF 等主流格式,以及 HEIC/HEIF(需浏览器支持)。因为是纯浏览器端处理,不限制文件大小上限,但超大图片(如 10000×10000 像素的 TIFF 文件)解析时间可能较长,建议使用 JPEG 格式。GIF 只取第一帧。RAW 格式(CR2、NEF 等)暂不支持,需先导出为 JPEG 或 PNG。所有处理在本地完成,不上传服务器,隐私安全。
为什么同一个图片,我用 Photoshop 看直方图和这里看的结果不一样?
差异可能来自两个原因:一是颜色空间不同,Photoshop 默认使用 Adobe RGB 或 ProPhoto RGB,本工具使用 sRGB(浏览器标准色彩空间),不同色彩空间的亮度映射有差异。二是直方图计算方式——Photoshop 的直方图有「未缓存」模式,会逐像素计算;浏览器绘制 canvas 时可能对图像做了下采样(大幅图缩小到 2D canvas 最大尺寸),导致微小亮度变化被合并。如果图片较小(< 2000 像素),差异通常在 ±2 个亮度级别内,不影响曝光判断。
直方图能帮我判断一张图是不是被后期过度修图了吗?
可以辅助判断,但不是绝对。过度修图(如暴力拉对比度、高饱和)会在直方图上留下痕迹:拉对比度会导致直方图两端出现「梳齿状」空隙(像素集中在 0 和 255 两端,中间亮度缺失);高饱和调整后 RGB 三通道的直方图形状会出现明显分离(比如红色通道在亮部异常凸起)。但专业修图师会用曲线和蒙版精细调整,直方图可能看不出明显异常。建议结合直方图「平滑度」和通道重叠程度综合判断。
为什么我上传了黑白照片,直方图还是显示三个通道?
即使肉眼看到的是黑白,文件本身可能仍保留了 RGB 三个通道(比如把彩色图去色后保存为 JPEG,三个通道的数值相等)。本工具默认显示 RGB 三通道直方图,黑白图的三条线会完全重叠,看起来像一条灰线。如果想只看亮度(灰度)分布,可以切换到「亮度直方图」模式(如果工具提供该选项),它合并三通道计算人眼感知的亮度(Y = 0.299R + 0.587G + 0.114B)。如果文件本身就是灰度模式(如单通道 PNG),则只有一条曲线。
选择 打开 +新窗口 esc关闭