Canvas 2D 中调亮度对比度首选 ctx.filter（Chrome/Edge/Safari≥16.4支持），如 ctx.filter = "brightness(1.2) contrast(0.8)"，仅影响后续绘制；兼容性要求高时用 getImageData/putImageData 手动计算像素值，注意跳过 alpha 通道并做 0–255 截断。
Canvas 2D 上下文怎么用 ctx.filter 调亮度和对比度
HTML5 Canvas 原生支持 CSS Filter 风格的滤镜，但仅限于 ctx.filter 属性，且只在 Chrome、Edge、Safari（≥16.4）中稳定可用，Firefox 目前不支持。它不能像 CSS 那样链式叠加多个 filter 函数，每次赋值会完全覆盖上一个值。
实操建议：
-
ctx.filter = "brightness(1.2) contrast(0.8)"是合法写法，空格分隔多个函数，顺序不影响渲染结果 - 数值为 1 表示原始状态；
brightness(0)全黑，brightness(2)整体提亮一倍；contrast(0)灰平（全灰），contrast(2)对比翻倍 - 该滤镜只作用于后续的
ctx.drawImage()、ctx.fillRect()等绘制操作，对已绘制内容无效 - 若需局部滤镜，必须先
ctx.save()，设filter，绘制，再ctx.restore()
用 ctx.putImageData() 手动改像素值调亮度对比度
这是兼容性最强、控制最细的方法，绕过浏览器滤镜限制，直接操作图像数据。适用于需要精确控制、或目标环境不支持 ctx.filter（比如旧版 Safari 或 Firefox）的场景。
常见错误现象：直接遍历 data 数组却没跳过 alpha 通道，导致颜色溢出或发紫；未做 Uint8ClampedArray 边界截断，造成负值/超 255 显示异常。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 亮度调整本质是给 R/G/B 同时加偏移：
newVal = Math.min(255, Math.max(0, oldVal + delta))，delta 范围建议 -100 ~ +100 - 对比度调整推荐用公式：
val = (val - 128) * contrastFactor + 128，其中contrastFactor是浮点数（如 1.3），最后仍要Math.min/max截断 - 务必在
getImageData()后修改data，再用putImageData()写回；不要漏掉data.set()或直接赋值失败
filter: brightness() contrast() 用在 ![html5滤镜怎样调亮度对比度_html5亮度对比度调节法【步骤】]()
直接给 filter 是有效的，但容易被忽略的坑有三个：
- 父容器设置了
overflow: hidden且图片尺寸超出，滤镜效果可能被裁剪（尤其是 brightness > 1 时边缘泛白） - CSS filter 不作用于图片加载前的占位区域，若 JS 动态设置，要确保图片已
load完成再应用 - 某些 CDN 或图片服务返回的响应头含
Cache-Control: immutable，配合 Service Worker 可能缓存了无滤镜版本，强制刷新或检查 DevTools 的 Network 面板确认实际加载的资源
WebGL 或 OffscreenCanvas 做高阶亮度对比度调节是否必要
纯亮度/对比度调节没必要上 WebGL —— 开销大、代码重、调试难。除非你同时要做 gamma 校正、色相旋转、局部蒙版、实时视频流处理，或者已有 WebGL 渲染管线。
OffscreenCanvas 在 Worker 中做像素计算确实能避免主线程卡顿，但要注意：
- Worker 中无法访问 DOM，
getImageData()必须由主线程传入 ArrayBuffer，或使用transferControlToOffscreen()搭配元素 - 亮度对比度这种简单运算，CPU 单线程处理几百万像素也只要几毫秒，优先考虑代码可维护性而非过早优化
- 移动端低端设备上，OffscreenCanvas 兼容性仍有缺口（如 iOS Safari ≤16.3 不支持）
真正容易被忽略的是：所有基于像素操作的方法，都默认按 sRGB 解释颜色值；如果图像本身是 linear RGB 或带 ICC Profile，直接加减会偏色——但绝大多数网页图片无需考虑这点。
