需用canvas+getImageData()提取同源图片像素并统计RGB直方图，遍历Uint8ClampedArray按通道累加频次，再归一化绘制；跨域需服务端支持CORS，大图应先缩放防内存溢出。
用 canvas 读取图片像素并计算 RGB 直方图
HTML5 本身不提供直方图 API，必须借助 canvas + getImageData() 提取像素数据，再手动统计。关键前提是图片必须同源（或已设置 CORS），否则 getImageData() 会因安全限制抛出 SecurityError。
实操步骤：
- 创建
，用drawImage()绘制图片（确保图片已加载完成） - 调用
ctx.getImageData(0, 0, width, height)获取ImageData对象 -
data属性是 Uint8ClampedArray，每 4 个元素对应一个像素的 R、G、B、A 值 - 遍历所有像素，对每个通道分别做 0–255 的频次累加（用长度为 256 的数组）
绘制直方图用 canvas 还是 SVG？
两者都可行，但 canvas 更轻量、更适合动态重绘；SVG 则利于缩放和样式控制。若直方图需响应式或导出高清图，选 SVG；若只是快速预览、频繁更新（如实时摄像头分析），canvas 是更直接的选择。
用 canvas 绘制柱状图时注意：
立即学习“前端免费学习笔记（深入）”；
- 横轴：0–255 表示灰度/通道值，需映射到画布宽度（如 256px → 512px，每单位占 2px）
- 纵轴：频次需归一化（例如除以最大频次 × 画布高度 × 0.9），避免柱子超出画布
- 建议用不同颜色绘制 R/G/B 三条曲线（透明度设为 0.7 可叠加观察）
ctx.getImageData() 报错 “The canvas has been tainted by cross-origin data” 怎么办？
这是最常见卡点，本质是跨域图片未授权读取像素。不能靠前端绕过，必须配合服务端或资源方支持 CORS。
解决路径：
- 如果图片来自自己的服务器：响应头加上
Access-Control-Allow-Origin: *（或指定域名） - 如果用第三方图床（如 imgur、unsplash）：检查其是否允许 CORS；部分支持在 URL 后加
?cors参数 - 前端加载时显式设置
img.crossOrigin = 'anonymous'，且该属性必须在src赋值前设置 - 本地文件（
file://协议）无法绕过此限制，务必起本地服务（如python3 -m http.server）测试
要不要转成灰度再算直方图？
取决于用途。RGB 直方图是三个独立通道分布，适合分析色彩偏移；灰度直方图（按加权公式 0.299*R + 0.587*G + 0.114*B 计算）反映整体明暗分布，常用于图像增强（如对比度拉伸）、曝光分析。
若只需一个总直方图，建议灰度化后再统计——代码更简、视觉更直观：
for (let i = 0; i < data.length; i += 4) {
const r = data[i], g = data[i+1], b = data[i+2];
const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
hist[gray]++;
}灰度直方图的峰值位置能快速判断图片是否过曝（峰值右移）或欠曝（峰值左移）。
真正容易被忽略的是图像尺寸和内存：大图（如 4000×3000）会产生上千万像素，Uint8ClampedArray 占用约 48MB 内存。实际项目中应先缩放（用 canvas drawImage 缩小）再采样，否则低端设备可能卡顿甚至崩溃。
