Canvas计算像素直方图分三步：图像加载与跨域处理、读取分类RGBA值、归一化绘图；需确保onload完成、crossOrigin设置、缩放防卡顿，统计后按maxCount归一化纵轴，支持通道切换、悬停提示和对数缩放。
用 Canvas 计算像素直方图，核心是三步：把图像画进 canvas、读取每个像素的 RGBA 值、按通道统计 0–255 各灰度/色阶出现次数，再归一化绘图。关键不在绘图多炫，而在数据读得准、分得清、不越界。
确保图像加载完成且跨域安全
Canvas 对图像加载状态和跨域限制很敏感，未就绪就调用 getImageData 会报错或返回空数据：
- 给 img 元素设置 crossOrigin = "anonymous"（前提是图片服务器支持 CORS）
- 必须等 img.onload 触发后，再设置 canvas 尺寸、绘制图像、调用 getImageData
- 建议提前缩放图像（如最大边 ≤ 800），避免大图导致内存暴涨或卡顿
读取并分类像素值
getImageData().data 返回的是长度为 width × height × 4 的 Uint8ClampedArray，每 4 个连续字节对应一个像素的 R、G、B、A（顺序固定，值域 0–255）：
- 统计单通道（如红色）：创建 new Array(256).fill(0)，遍历 data 数组，对每个 data[i]（i 是 4 的倍数）执行 histR[data[i]]++
- 灰度值推荐用加权公式：gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b)，再统计 gray 频次
- Alpha 通道一般不参与直方图分析，除非专门研究透明度分布
归一化绘制直方图
原始频次数值差异大，直接绘图会导致大部分柱子压成一条线，必须做纵轴归一化：
- 找出频次数组中的最大值 maxCount
- 设定画布高度（如 200px），每根柱子高度 = (count / maxCount) × 160（留出 20px 边距）
- 柱状图：用 ctx.fillRect(i, y, 1, height - y) 绘制宽度为 1 的竖条；折线图用 moveTo/lineTo 连点，更省性能
- 可添加横轴刻度（每 32 格标一次 0/32/64…255）、图例文字（如 fillText("Red", 10, 15)）
支持交互与实用增强
基础直方图只是起点，加几个小功能就能大幅提升实用性：
- 提供按钮切换 R/G/B/Gray 直方图，只需复用同一套统计逻辑，改用不同颜色 fillStyle 和数据源
- 鼠标悬停时显示当前横坐标对应的灰度级和像素数量，通过 canvas.getBoundingClientRect() 换算鼠标位置即可
- 对数缩放纵轴（log(count + 1)）可缓解高频区压缩，让暗部细节更可见
- 监听文件 input 变化，自动重跑整套流程，实现“上传即分析”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
