Canvas中用ctx.filter做高光提亮不可靠，应通过ImageData手动识别高光区域并非线性提亮，或在性能不足时升级至WebGL着色器处理。
HTML5 Canvas 中用 ctx.filter 做高光提亮不靠谱
直接用 ctx.filter = "brightness(1.3)" 这类 CSS 滤镜在 Canvas 上做高光提亮，多数浏览器（尤其是 Safari 和旧版 Chrome）会失效或严重失真。Canvas 的 filter 属性仅对 drawImage() 生效，且不支持动态像素级控制——你想提亮人脸高光区域？它只会把整张图无差别加亮。
真正可控的高光提亮得靠 ImageData 手动计算
核心思路是：读取图像像素 → 识别高光区域（比如 Y 通道 > 200 或 RGB 均值 > 220）→ 对这些像素的 R/G/B 分量做非线性提升（避免过曝），同时保持色相基本不变。
- 先用
ctx.getImageData(0, 0, width, height)获取原始像素数组 - 遍历
data数组，每 4 个值为一组（R、G、B、A） - 判断是否为高光：用
Math.max(r, g, b) > 210比单纯算均值更抗噪 - 提亮时别直接 *1.3：改用
r = Math.min(255, r + (255 - r) * 0.4)，这样暗部不动、亮部渐进增强 - 写回
imageData.data后调用ctx.putImageData()
filter: brightness() 只适合简单预览，不能替代像素操作
如果你只是想快速看效果，给 style="max-width:90%"。但注意：
- 它无法限定作用区域（比如只提亮额头/鼻梁）
- 在 Canvas 中对
fillRect()或文字生效，但对drawImage()的兼容性差 - 移动端 Safari 会忽略
brightness()对 Canvas 内容的设置 - 导出为 PNG 时，CSS 滤镜不会被保存——你看到的只是渲染层叠加
WebGL 方案更高效但复杂度陡增
如果图像大于 1000×1000 或需实时处理，ImageData 会明显卡顿。这时该切到 WebGL：
立即学习“前端免费学习笔记（深入）”；
- 用
texImage2D()把图片传入纹理 - 写 fragment shader，在着色器里按亮度阈值做局部提亮（例如用
dot(vec3(0.299, 0.587, 0.114), rgb)算灰度） - 关键点：高光增强必须带 gamma 校正，否则 sRGB 下会发灰——别漏了
pow(color, vec3(2.2))输入和逆运算输出 - Three.js 的
ShaderMaterial可封装逻辑，但首次调试 shader 错误信息极不友好（比如ERROR: 0:12: 'foo' : undeclared identifier）
高光提亮真正的难点从来不在“怎么亮”，而在于“哪里该亮多少”——人眼对局部对比度敏感，一刀切的滤镜反而让画面变假。动手前先用 ImageData 跑通逻辑，再根据性能瓶颈决定是否升级 WebGL。
