HTML5 Canvas可通过像素遍历、明暗分区与通道偏移模拟Photoshop色彩平衡：先按加权灰度Y=0.299R+0.587G+0.114B分高光/中间调/阴影三段，再对每段R/G/B独立增减并限幅至[0,255]，需注意同源、尺寸匹配及边读边写禁忌。
HTML5 Canvas 本身不提供“色彩平衡”原生接口，但可通过像素遍历 + 明暗分区 + 通道偏移的方式，模拟 Photoshop 中高光/中间调/阴影三段式、青红/洋红绿/黄蓝三轴的调节逻辑。核心在于把图像按亮度分层，再对每层的 R/G/B 独立增减——这不是简单滤镜叠加，而是带条件判断的逐像素运算。
明暗分区：按灰度值划分三段区域
色彩平衡的关键前提是区分图像的明暗响应区域。不能直接用 RGB 值判断，而应先计算加权灰度：
- 公式：Y = 0.299 × R + 0.587 × G + 0.114 × B（人眼感知权重）
- 阈值设定示例：阴影 Y ∈ [0, 64)，中间调 Y ∈ [64, 192)，高光 Y ∈ [192, 256]
- 注意：阈值不是固定值，应支持用户调节（如滑块控制分界点），并缓存为归一化比例（0–1）便于后续插值
通道偏移：为每段配置独立的 R/G/B 增益
每段可设置三个数值：红偏移、绿偏移、蓝偏移（范围建议 -30 至 +30）。处理时按亮度归属施加对应偏移：
- 若像素属高光段 → data[i] += highR；data[i+1] += highG；data[i+2] += highB
- 若属中间调 → 加 middleR/G/B；阴影同理
- 所有结果必须 clamped 到 [0, 255]：data[i] = Math.max(0, Math.min(255, data[i]))
- Alpha 通道（data[i+3]）全程跳过，不参与任何运算
避免常见陷阱：顺序、溢出与跨域
实际编码中，以下细节决定功能是否可用：
- 图像必须已加载完成，并监听 img.onload；否则 getImageData 返回空或报错
- 图片需同源，或服务端开启 CORS，且 img 元素显式设置 crossOrigin="anonymous"
- 画布尺寸要与图像原始宽高一致，否则 getImageData 坐标会偏移或截断
- 禁止边读边写：getImageData 返回的是副本，必须完整遍历修改后再 putImageData，不可在循环中混用 get/put
进阶优化：支持平滑过渡与实时预览
真实工具需超越硬分段，提升自然感：
- 用双线性插值替代阈值跳跃：例如某像素 Y=190，位于高光（192）边缘，则按 (192−190)/2 线性混合中间调与高光偏移量
- 将三段偏移封装为对象，如 { shadows: { r: -5, g: +2, b: +8 }, midtones: { r: 0, g: +6, b: -3 }, highlights: { r: +12, g: -4, b: -7 } }
- 绑定 input[type="range"] 滑块，变更参数后节流重绘（推荐 requestAnimationFrame 或 60ms 最小间隔），避免卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
