HTML5 Canvas 的 ctx.filter 无法实现去饱和，因其仅作用于后续绘制且兼容性差；真正可行方案是 getImageData() + 加权灰度公式（0.299r+0.587g+0.114b）手动处理像素，注意同源限制、alpha 保持及性能优化。
HTML5 Canvas 中用 ctx.filter 去饱和行不通
HTML5 原生 Canvas 的 ctx.filter 属性（如 "saturate(0)"）在大多数浏览器中**不生效**，尤其在 Chrome 98+ 和 Safari 中被禁用或仅对 drawImage() 有效，且不支持对已绘制内容实时滤镜。这不是写法问题，是规范限制——ctx.filter 本质只作用于后续绘制操作，且兼容性极差，不能当“画面后期处理”用。
真正可用的去饱和方案：用 getImageData() + 灰度转换算法
要对已有图像/画布内容做去饱和（即转灰度），必须手动读取像素、计算亮度、写回。核心是把 RGB 转为加权灰度值：0.299 * r + 0.587 * g + 0.114 * b（YUV 亮度公式，比简单平均更符合人眼感知）。
实操要点：
- 确保 Canvas 已绘制目标图像，且同源（否则
getImageData()报"The canvas has been tainted by cross-origin data"） - 调用
ctx.getImageData(0, 0, width, height)获取像素数组，.data是Uint8ClampedArray，每 4 个元素一组对应 RGBA - 遍历每个像素，用加权公式算出灰度值
gray，然后统一赋给r、g、b三个通道 - 保持
a（alpha）不变，避免透明度异常 - 最后用
ctx.putImageData()写回，注意传入原始imageData对象，不是修改后的数组
性能关键：避免逐像素 JS 循环（尤其大图）
纯 JS 处理 1000×1000 图像要操作 100 万次，卡顿明显。优化方向：
立即学习“前端免费学习笔记（深入）”；
- 用
for替代for...of或forEach，减少函数调用开销 - 把灰度公式内联，不抽成函数；提前缓存
data.length和data引用 - 对超大图（如 >2000px），考虑用 Web Worker 搬运计算，避免阻塞主线程
- 更激进但有效的做法：改用 WebGL（
WebGLRenderingContext）写简单灰度 shader，GPU 加速，10 倍以上性能提升
CSS filter 不是 Canvas 解决方案，但可临时替代
如果只是想让整个 Canvas 元素视觉上“看起来去饱和”，且不需要像素级操作（比如导出图片、叠加其他绘制），直接给 <canvas> 标签加 CSS：
canvas {
filter: saturate(0) brightness(1.05); /* 加点亮度补偿灰度变暗 */
}注意：filter 是纯显示层效果，toDataURL() 导出的仍是原图；也不能用于 Canvas 内部混合绘制（比如先画图再画文字，文字不会受该 filter 影响）。
真正需要修改像素数据时，绕不开 getImageData() 那套流程。容易被忽略的是 alpha 通道处理和跨域限制——哪怕只差一个 crossorigin="anonymous" 属性，整段逻辑就静默失败。
