uni-app怎么实现图片马赛克 uni-app图片模糊处理方法 技巧

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> 组件本身也不提供模糊接口，想“加马赛克”必须换思路。

核心路径只有一条：用 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> 元素生效，不能直接传 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> 的 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" />，radius 实际控制马赛克块大小
• 注意插件需在 manifest.json 中正确配置原生权限（如 iOS 的 NSPhotoLibraryUsageDescription），否则真机白屏
• 调试时优先用真机，模拟器图像处理行为和真机差异极大

复杂点不在怎么写，而在平台边界：同一份逻辑，在 H5 是 canvas 操作，在小程序是绘图降级，在 App 是原生桥接——漏掉任一端，上线就出视觉 bug。