uni-app 中 CSS filter 和 canvas 像素操作多端不兼容，微信/支付宝小程序禁用 filter，H5 兼容性差，App 端受限于 WebView 限制；推荐服务端处理或原生插件（如 fz-image-editor）实现跨端图像滤镜。
不能直接用 filter CSS 属性在所有平台生效，也不能用 getContext('2d') 做像素操作——这是 uni-app 多端渲染机制决定的，不是代码写错了。
微信/支付宝小程序里 filter: grayscale() 为什么没反应
因为这些小程序渲染层明确禁用 CSS 滤镜，filter 规则会被静默忽略。你检查 Elements 面板会发现该样式被划掉或根本不出现。
- 不要尝试加
-webkit-filter或其他前缀，无效 - H5 端可用，但 Android 旧 WebView 可能只认
grayscale(100%)，不认grayscale(1) - 真机调试时，微信开发者工具里可能“看起来有效”，但 iOS/Android 真机大概率失效
- 替代方案只有两个：服务端返回灰度图，或用
uni.createCanvasContext+uni.getImageInfo动态处理（仅限小程序）
App 端（iOS/Android）根本不能用 JS 做实时滤镜
WebView 中 ctx.getImageData() 返回空数据或被截断；大图遍历像素会卡死主线程，iOS 还有跨域读取限制。
-
uni.canvasToTempFilePath在 App 端导出的是原始绘制内容，不包含任何 CSSfilter效果 - 用
stackblur-canvas对一张 1080p 图做模糊，iOS 真机耗时常超 1.2 秒，用户明显感知卡顿 - 原生插件是唯一可行路径：比如
fz-image-editor（基于 UTS），它调用 GPUImage（iOS）或 RenderScript（Android）实现 GPU 加速 - 如果只是静态图简单处理，可先压缩再传给后端，用 OpenCV/PIL 加滤镜后返回 URL
全平台兼容的毛玻璃效果怎么搞
别指望 backdrop-filter 能跨端跑通——它在微信小程序完全不支持，在 App 端仅 iOS 14+ 和部分高版本安卓 WebView 支持。
- H5 场景可用：用
<view>包裹，设background-image，前景层加backdrop-filter: blur(12px)和rgba(255,255,255,0.6) - App/小程序必须换思路：准备两张图——一张原图，一张服务端生成的高斯模糊图（推荐半径 20–40px），用绝对定位叠加
- 模糊图尺寸必须和原图一致，否则拉伸失真；避免在
<scroll-view>里频繁切换，低端安卓机会卡顿 - 构建时用 ImageMagick 批量生成：
convert input.jpg -blur 0x20 output-blur.jpg
真正麻烦的从来不是“怎么写代码”，而是不同平台对图像数据的访问权限、内存限制和渲染链路差异。哪怕只是加个灰度，也要先判断来源（本地相册？相机？网络 URL？）、目标平台（小程序？App？H5？）、性能要求（单张静态图？实时预览？）。漏掉任一环，都可能在真机上白屏、卡死或无声无息失效。
