网页端无法直接调用Photoshop的“色彩平衡”功能，但可通过Canvas 2D像素级操作，按亮度分段（阴影/中间调/高光）对RGB通道施加独立偏移来模拟该效果；需注意跨域设置、像素读写流程、溢出保护及性能优化，CSS filters因无法分区调控而不适用。
网页端无法直接调用“色彩平衡”这一 Photoshop 级别的原生功能，但可通过 Canvas 2D 的像素级操作，模拟高光/中间调/阴影三段式 RGB 偏移，实现接近专业软件的色彩平衡效果。核心是按亮度分段、分通道调整，而非全局滤镜。
一、先准备图像并获取像素数据
确保图片已加载完成且无跨域限制：
- 设置
img.crossOrigin = ''（即使同源也建议显式声明） - 用
img.onload触发后续逻辑，避免读取空白画布 - canvas 的
width和height必须设为实际像素值（不能只靠 CSS 缩放） - 调用
ctx.drawImage(img, 0, 0)绘制后，再执行ctx.getImageData(0, 0, w, h)
二、按亮度分段计算并调整 RGB
色彩平衡的关键在于区分明暗区域，分别施加偏移。步骤如下：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 遍历每个像素，用加权灰度公式算亮度：
Y = r * 0.299 + g * 0.587 + b * 0.114 - 按 Y 值划分三段：
阴影（Y - 对每段设定独立的 R/G/B 偏移量，例如：
高光：+12R, −8B
中间调：−5R, +6G
阴影：+0R, +3G, −2B - 对每个通道执行：
newVal = Math.min(255, Math.max(0, original + offset))，防止溢出 - Alpha 值（data[i+3]）全程跳过，保持不变
三、写回画布并注意性能
修改完 imageData.data 后必须主动写回：
- 调用
ctx.putImageData(imageData, 0, 0)，否则画面无变化 - 避免在滚动或鼠标移动中频繁调用，putImageData 是重操作
- 大图建议先缩放为缩略图处理，或使用 OffscreenCanvas 拆离主线程
- 调试时可用
console.log(data.subarray(0, 12))查看前 3 像素验证逻辑是否生效
四、不推荐仅依赖 CSS filters
CSS 的 brightness()、saturate()、contrast() 无法区分明暗区域，也不支持青红/洋红绿等补色轴控制：
-
saturate(2)是线性放大 RGB 差值，易致局部过饱和失真 -
hue-rotate(10deg)会整体旋转色相，无法单独加黄或减青 - 多个 filter 叠加顺序影响结果，如
brightness(1.2) contrast(1.3)可能提前溢出 - 它适合快速预览或轻量美化，但不能替代真正的色彩平衡逻辑
