网页端无法直接调用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) 可能提前溢出
• 它适合快速预览或轻量美化，但不能替代真正的色彩平衡逻辑