uni-app 中 filter: blur() 在小程序和 App 端不支持，需分平台实现模糊效果：H5 用 stackblur-canvas，小程序用 canvas 块状采样模拟马赛克，App 端必须用原生插件。
uni-app 里没有原生 filter: blur() 支持，别硬套 CSS
在 H5 端能用的 filter: blur(2px)，放到小程序（微信/支付宝）或 App 端直接失效——因为这些平台的 WebView 或原生渲染层不支持该 CSS 属性。uni-app 的 <image></image> 组件本身也不提供模糊接口，想“加马赛克”必须换思路。
核心路径只有一条：用 Canvas 手动绘制模糊效果，再转成临时图片。
- 小程序端必须走
canvas+ctx.getImageData/putImageData（但微信小程序 Canvas 2D API 有兼容限制，得用createCanvasContext+drawImage配合离屏 canvas） - H5 端可直接用
OffscreenCanvas或普通canvas做高斯模糊（推荐使用轻量库如stackblur-canvas） - App 端（iOS/Android）建议用原生插件，否则纯 JS 模糊大图卡顿明显
用 stackblur-canvas 快速实现 H5 图片模糊
这是目前最省事、兼容性最好的方案，专为 canvas 设计，体积小（
注意：它只对 <canvas></canvas> 元素生效，不能直接传 URL 或 base64 字符串。
- 先用
uni.downloadFile把图片下到本地，再用uni.getImageInfo获取宽高，最后用uni.createCanvasContext绘制到 canvas 上 - 调用
stackBlur.canvasRGBA时，参数顺序是(canvas, x, y, width, height, radius)，radius超过 10 就容易糊成一片，建议控制在 2–6 - 模糊完记得用
canvas.toDataURL('image/png')导出，再赋给<image></image>的src
const ctx = uni.createCanvasContext('myCanvas', this);
ctx.drawImage(imagePath, 0, 0, width, height);
ctx.draw(true, () => {
const canvas = uni.getCanvasById('myCanvas');
stackBlur.canvasRGBA(canvas, 0, 0, width, height, 4);
// 后续调用 toDataURL...
});
小程序端做马赛克？别碰高斯模糊，改用「块状采样」
微信小程序 Canvas 2D 的 getImageData 在真机上基本不可用（返回空数据），且 JS 计算性能差，强行跑高斯模糊会卡死或超时。更可行的是模拟马赛克效果：把图像按格子切分，每个格子取左上角像素，重复填充。
- 用
ctx.getImageData不现实，改用多次ctx.drawImage：每次只画一个blockSize × blockSize区域，再放大贴到目标位置 - 例如
blockSize = 8，遍历i += 8, j += 8，每次从(i, j)取 1×1 像素，画到(i, j)开始的 8×8 区域 - 这个方法不依赖像素读取，纯绘图，所有小程序平台都稳定，且性能好得多
- 缺点是效果是“像素风”，不是柔边模糊，但符合“马赛克”的原始语义
App 端用原生插件才是正解，JS 处理大图必崩
一张 2000×3000 的 JPG，在 iOS 或 Android 上用 JS 做模糊，内存占用飙升，主线程卡顿，还可能触发系统杀进程。uni-app 官方插件市场已有成熟方案，比如 uni-mosaic 或自研 mosaic-view。
- 插件内部用 Objective-C / Swift（iOS）和 Java / Kotlin（Android）调用系统图像处理 API，速度比 JS 快 10 倍以上
- 调用方式极简：
<mosaic-view :src="imgUrl" :radius="6"></mosaic-view>，radius实际控制马赛克块大小 - 注意插件需在
manifest.json中正确配置原生权限（如 iOS 的NSPhotoLibraryUsageDescription），否则真机白屏 - 调试时优先用真机，模拟器图像处理行为和真机差异极大
复杂点不在怎么写，而在平台边界：同一份逻辑，在 H5 是 canvas 操作，在小程序是绘图降级，在 App 是原生桥接——漏掉任一端，上线就出视觉 bug。
