html5 canvas像素分析可实现自动对比度增强，需手动获取imagedata、计算亮度直方图、取1%和99%分位数确定黑/白场、线性拉伸rgb并保持alpha不变，最后putimagedata渲染。
HTML5 Canvas 的像素分析技术可以实现自动对比度增强，核心是读取图像原始像素数据、计算全局亮度分布、再按算法拉伸中间调区域。这不是靠 CSS filter 一键完成的事，必须手动操作 ImageData。
获取并预处理像素数据
先确保图片已加载且同源（跨域需加 crossOrigin="anonymous"），再绘制到 canvas 上。画布尺寸必须与图片完全一致，否则 getImageData() 可能越界或采样失真。
- 监听
img.onload后再执行绘图和数据提取 - 设置 canvas.width/height = img.naturalWidth/Height，而非依赖 CSS 尺寸
- 调用
ctx.getImageData(0, 0, width, height)获取 RGBA 像素数组 - data 是一维
Uint8ClampedArray，每 4 个元素为一个像素：R、G、B、A
计算亮度直方图并确定动态范围
对比度增强的本质是扩展图像中信息最丰富的亮度区间。标准做法是统计所有像素的亮度值（用加权平均：L = 0.299×R + 0.587×G + 0.114×B），然后找出第 1% 和第 99% 分位数（即裁掉最暗和最亮的极端噪点），作为新的“黑场”和“白场”基准。
- 遍历全部像素，计算每个 L 值并存入数组
- 对亮度数组排序，取索引
Math.floor(0.01 * total)和Math.floor(0.99 * total)对应的值 - 若最小亮度为
minL、最大为maxL，则拉伸系数为255 / (maxL - minL)
应用线性拉伸并写回画布
对每个像素的 R、G、B 分别做映射：newVal = (val - minL) * scale，再截断到 [0, 255]。注意 Alpha 通道保持不变，避免透明区域被误处理。
- 使用
Math.max(0, Math.min(255, newVal))防止溢出 - 修改
data[i]、data[i+1]、data[i+2]，跳过data[i+3]（Alpha） - 全部处理完后，用
ctx.putImageData(imageData, 0, 0)渲染结果 - 该操作较重，不要在动画循环中频繁调用
可选：加入局部对比度微调提升层次感
纯全局拉伸可能让阴影或高光细节发平。可在拉伸后，对亮度处于中灰区间（如 L ∈ [76, 179]）的像素，小幅增强其与邻域均值的偏差——类似“清晰度”效果，但需额外计算 3×3 邻域亮度均值，适合中小尺寸图。
- 不建议对整图实时做，可降采样后再处理以平衡效果与性能
- 避免直接增强边缘像素，否则易引入噪点或光晕
- 移动端建议限制最大处理尺寸（如宽高 ≤ 800），防止卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
