saturate()参数应为无单位数字：0为灰度，1为原图，1.2–1.4适合提鲜，0.6保留情绪；跨域、transform干扰或ios safari旧版可能导致失效。
直接用 filter: saturate() 就行，99% 的场景不需要写 JS 或 Canvas —— 但值怎么填、为什么有时没反应、哪些设备会掉链子，得一个个对上。
filter: saturate() 的参数怎么设才不翻车
它只接受一个无单位数字：saturate(0) 是纯灰度，saturate(1) 是原图，saturate(1.8) 表示 1.8 倍饱和度。别写成 saturate(80%) 或 saturate(0.8)（那是降低到 80%，不是降低 20%）。
- 想“轻微提鲜”：用
saturate(1.2)~saturate(1.4)，比saturate(2)更耐看 - 做氛围降饱和：
saturate(0.6)比saturate(0)保留更多情绪，避免死灰感 - 数值可远超 10，比如
saturate(15)在 Safari 上仍有效，但安卓旧 WebView 可能截断或崩溃
图片加了 saturate() 却没变化？先查这三件事
最常见不是语法错，而是渲染层被拦住了。
- 父容器或自身设置了
transform: scale(1)或will-change: transform，某些 Android WebView 会跳过 filter 渲染 - 图片是跨域加载的（比如 CDN 地址），但没加
crossOrigin="anonymous"—— 这在 Canvas 场景报错，但在filter下只是静默失效 - 用了
img标签但包裹了display: inline的祖先元素，部分 iOS Safari 15.3 及更早版本会忽略 filter
需要导出处理后图片？Canvas 是唯一可靠路径
filter 是纯视觉效果，DOM 里拿不到新像素数据。要下载、上传或二次加工，必须走 Canvas 流程。
- 先用
ctx.drawImage(img, 0, 0)把图绘进去，再调ctx.getImageData()—— 直接对原始<img>调用会报错 - 遍历
ImageData.data时，每 4 个字节一组：data[i]是 R，data[i+1]是 G，data[i+2]是 B，data[i+3]是 A；漏掉 +3 容易整张图变紫或全绿 - 大图（>1200×800）建议用
requestIdleCallback分块处理，否则主线程卡顿明显
旧浏览器兼容 fallback 怎么写才不拖慢现代用户
IE 11 完全不支持 filter，Edge 12–15 支持有限，但强行 polyfill 代价太大。
- 优先用 @supports 检测：
@supports (filter: saturate(1)) { .photo { filter: saturate(1.3); } } - 降级方案别用 Canvas 全量兜底 —— 给 IE 用户显示原图，加一句提示文案比白屏友好得多
- 真要兼容老环境，用 SVG
<fecolormatrix></fecolormatrix>替代，但注意它不支持动态值，只能预设几档（如saturate-0.5/saturate-1.5）
真正麻烦的不是怎么调，而是调完之后要不要响应式重绘、是否触发离屏渲染、有没有在滚动列表里批量滥用——这些不会报错，但会让用户觉得“页面变卡了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
