CSS filter 属性支持 grayscale()、sepia()、blur()、contrast()、brightness()、saturate()、hue-rotate() 等函数，可链式组合且顺序影响结果；但无法实现高光/阴影分离、胶片颗粒或局部模糊等像素级控制，此类需求须借助 canvas getImageData 手动处理。
直接用 filter 属性就能实现大多数常见滤镜效果，但真要控制高光/阴影分离、胶片颗粒或局部模糊，必须进 canvas 拿像素手动算——CSS 只是快捷入口，不是万能开关。
filter 属性能做什么、不能做什么
CSS filter 是最轻量的方案，支持 grayscale()、sepia()、blur()、contrast()、brightness()、saturate()、hue-rotate() 等函数，还能链式组合：
- 顺序影响结果：
blur(2px) contrast(1.2)和contrast(1.2) blur(2px)渲染不同 -
drop-shadow()不是滤镜，它不感知图像内容，只在元素外框加投影，别指望它模拟浮雕或晕影 -
sepia(0.8)加contrast(0.85)+blur(0.3px)能凑出老照片感，但无法还原褪色偏移或青橙分离 - iOS Safari 对
filter: url(#svg-filter)支持不稳定，kernelUnitLength设非 1 值可能直接失效
canvas getImageData 是唯一可控的像素级入口
当你要做灰度加权转换、通道非线性映射、颗粒叠加或方向性边缘增强，getImageData() 是绕不开的起点：
- 必须等图片真正绘制完成再调用：
img.onload = () => { ctx.drawImage(img, 0, 0); const data = ctx.getImageData(0, 0, w, h).data; } -
data是Uint8ClampedArray，每 4 个值一组：R、G、B、A；别忘了最后设data[i+3] = 255，否则透明区域漏底 - 复古滤镜关键不在均值，而在分段处理：红通道中灰（80–180）×1.2，蓝通道暗部（<60）微提 +5，绿通道整体压低至 ×0.75
- 浮雕不是简单减邻域，推荐右下差分：
gray(x+1,y+1) - gray(x,y)，再映射到 0–255 同时加到 RGB 三通道
性能敏感场景必须换执行环境
一张 1920×1080 图片，主线程跑完整像素循环很容易卡顿 100ms+，尤其在移动端：
立即学习“前端免费学习笔记（深入）”；
- 优先用
OffscreenCanvas：Chrome/Firefox 支持，可在 Web Worker 里创建并调用getContext('2d')，完全不阻塞 UI - 降级方案用
requestIdleCallback分块处理，每次只算 50 行，留出空闲时间响应滚动或点击 - 千万别在
img.onload里直接全量处理——图片加载完成 ≠ 渲染就绪，先检查canvas.offsetWidth是否为正数 - 高斯模糊半径 >10 时，CPU 计算开销陡增，此时服务端生成（如用
sharp）仍是更稳的选择
SVG 滤镜和 WebGL 是特殊需求的备选
filter: url(#id) 可调用内联 SVG 中定义的 <feConvolveMatrix> 或 <feTurbulence>，适合浮雕、噪点等硬件加速场景，但兼容性和调试成本高：
-
<feConvolveMatrix>的targetX/targetY建议设为 1，确保卷积中心对齐；preserveAlpha="true"必须开启，否则 PNG 透明区失真 -
<feTurbulence>做胶片颗粒时，baseFrequency应设为 0.002–0.005，不是 0.05；numOctaves="2"比默认 1 更自然 - WebGL 方案自由度最高，但 fragment shader 在 iOS Safari 上
precision mediump float下系数易被截断，建议显式声明highp并实机测试 - 真正难的不是写出效果，而是让同一张图在 iPhone、MacBook Pro 和安卓中端机上看起来“差不多”——设备色域、PPI、GPU 实现差异都会吃掉你调的那 5% 饱和度
