HTML5无“通透滤镜”，需用CSS filter组合实现：contrast(1.1–1.3)、brightness(1.05)、saturate(1.05)，禁用blur；Canvas可像素级调色阶；WebGL自由度高但易过头，需注意设备一致性。
HTML5 本身没有叫“通透滤镜”的内置功能，所谓“通透”通常是人眼对高对比、低雾感、轻微锐化+去黄/提青的主观感受，得靠 filter CSS 属性组合实现，不是调一个参数就能出效果。
用 filter 模拟“通透感”的核心组合
纯 CSS 的 filter 是最轻量、兼容性最好的方式（Chrome 53+/Firefox 35+/Safari 9.1+ 支持）。关键不是堆叠很多值，而是控制好三组关系：
-
contrast(1.1)到contrast(1.3)：小幅提升对比，避免发灰；超过 1.4 容易断层 -
brightness(1.05)配合saturate(1.05)：微提亮度和饱和，但不泛白、不艳俗 -
unset或blur(0.2px)：千万别加blur()，雾感就来了；若原图有轻微噪点，可加极小值柔化边缘，但0.2px是上限
示例：
img {
filter: contrast(1.2) brightness(1.03) saturate(1.05);
}
Canvas 中用 getImageData 做更精准的“通透”调整
如果需要跳过浏览器 filter 的粗粒度限制（比如单独压低黄色通道、提亮青蓝），就得进 Canvas 手动操作像素。这时“通透”本质是色阶重映射：
- 读取
getImageData().data得到 RGBA 数组 - 对每个像素的
r、g、b值做线性拉伸：newR = (r - 10) * 1.05（减去环境偏黄基底，再微扩） - 重点：限制输出范围——
Math.min(255, Math.max(0, newR))，否则溢出变色块 - 写回
putImageData前，务必用ctx.globalCompositeOperation = 'copy'避免叠加污染
WebGL 滤镜（如 Three.js 或自定义 shader）适合批量处理但容易过头
用 fragment shader 实现“通透”，自由度最高，但也最容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 常见错误是直接套用 Photoshop 的“清晰度”算法，结果在低分辨率图上产生光晕伪影
- 推荐用 HSV 空间做调整：
v *= 1.08（提明度）、s *= 0.97（略降饱和防刺眼），比 RGB 直调更自然 - 移动端要注意 shader 精度：
precision mediump float下，0.001级别的系数可能被截断，建议改用highp并测试 iOS Safari
真正难的不是调出“通透”，而是让同一张图在不同设备、不同屏幕色域下都保持这种观感——CSS filter 最省事但受限，Canvas 可控但吃 CPU，WebGL 强大但调试成本高。选哪种，取决于你是否能接受用户手机上看和你显示器上差那么一丢丢。
