uni-app跨平台毛玻璃效果需分端实现：H5用stackBlur.canvasRGBA，小程序用块状采样模拟，App端必须依赖原生插件（如腾讯云GPU加速），因filter和backdrop-filter在小程序及nvue中不被支持。
uni-app 里做毛玻璃（背景虚化）效果，filter: blur() 在 H5 端能用，但微信小程序和 App 端（nvue）直接失效——不是写法错，是平台根本不支持该 CSS 属性。真机上看到“没效果”或“白屏/卡死”，大概率是误用了纯 CSS 方案跨平台。
为什么 backdrop-filter 在 uni-app 里基本不能用
这个属性要求两个条件：容器必须有透明背景 + 背后内容需是“真实背景层”。但 uni-app 的 background-image，所以无法构造出“半透容器盖在模糊图上”的结构。即使写上 -webkit-backdrop-filter: blur(8px)，iOS 真机（尤其 iOS 15+）也常表现为无反应或渲染异常。
H5 端用 stackblur-canvas 最省事
它专为 canvas 设计，体积小、API 直观，且不依赖 WebGL。注意三点：
- 不能直接传图片 URL，得先用
uni.downloadFile下载到本地临时路径 - 必须用
uni.getImageInfo获取原始宽高，避免 canvas 绘制区域失真 -
stackBlur.canvasRGBA的radius建议设为 2–6，超过 8 容易糊成色块，且耗时陡增
示例关键片段：
const ctx = uni.createCanvasContext('blurCanvas', this)
ctx.drawImage(tempFilePath, 0, 0, width, height)
ctx.draw(true, () => {
const canvas = uni.getCanvasById('blurCanvas')
stackBlur.canvasRGBA(canvas, 0, 0, width, height, 4)
const blurred = canvas.toDataURL('image/png')
this.blurredSrc = blurred
})
小程序端别碰高斯模糊，改用「块状采样」模拟马赛克感
微信小程序 Canvas 2D 的 getImageData 在真机上基本返回空数据，JS 做像素遍历会超时或卡死。更稳的方案是纯绘图逻辑：
- 把原图按
blockSize = 8切格子 - 每次用
ctx.drawImage只取左上角 1×1 像素，放大画到 8×8 区域 - 全程不读像素，只调用绘图 API，所有平台兼容性好
这虽不是数学意义的高斯模糊，但视觉上足够营造“虚化背景+前景文字清晰”的毛玻璃层次感，且性能稳定。
App 端（iOS/Android）必须走原生插件
纯 JS 在 nvue 渲染层做高斯模糊，大图（如 1080p）会导致严重卡顿甚至内存溢出。官方推荐路径是集成原生能力，例如：
- 使用腾讯云
tuicallkit的enableVirtualBackground(true)接口，它底层调用 GPU 加速的模糊模型 - 首次启用会有 1–3 秒延迟（模型下载），但后续开启极快
- 需提前在 manifest.json 中配置原生插件，并确保 HBuilderX ≥ 3.94
跨平台毛玻璃最难的不是“怎么实现”，而是“在哪实现”——H5 用 canvas，小程序用块采样，App 必须交还给原生，硬套一套代码只会处处踩坑。
