首页 > 网页制作 >uni-app实现图片马赛克与模糊处理技巧

uni-app实现图片马赛克与模糊处理技巧

来源：互联网 2026-06-14 08:19:12

uni-app 实现图片模糊效果，别再死磕 CSS filter 了在 uni-app 里处理图片模糊，不少开发者第一反应是写一行 filter: blur(2px)。结果呢？H5 端爽了，一到小程序或 App 端直接失效——因为那些平台的渲染层根本不认这个 CSS 属性。组件本身也没有提供模糊

uni-app 实现图片模糊效果，别再死磕 CSS filter 了

在 uni-app 里处理图片模糊，不少开发者第一反应是写一行 filter: blur(2px)。结果呢？H5 端爽了，一到小程序或 App 端直接失效——因为那些平台的渲染层根本不认这个 CSS 属性。组件本身也没有提供模糊接口。想给图片“打马赛克”或者做高斯模糊，必须换条路走。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

核心路径其实很明确：用 Canvas 手动绘制模糊效果，再转成临时图片。但具体怎么画，得看你在哪个平台干活。

小程序端：必须走 canvas + ctx.getImageData / putImageData 这套流程。不过微信小程序的 Canvas 2D API 在真机上有不少兼容限制，实际开发中通常用 createCanvasContext + drawImage 配合离屏 canvas 来曲线救国。
H5 端：可以直接用 OffscreenCanvas 或普通 canvas 做高斯模糊。想省事的，推荐用轻量库 stackblur-canvas，社区验证充分。
App 端（iOS/Android）：纯 JS 跑模糊，尤其是大图，基本是吃力不讨好。建议直接上原生插件，性能差距是数量级的。

H5 端最省事的方案：stackblur-canvas

如果你主要覆盖 H5 场景，stackblur-canvas 是目前兼容性最好的选择。它专为 canvas 设计，体积小，写法也不复杂。不过有两点需要注意：一是它只对元素生效，不能直接传图片 URL 或 base64 字符串；二是参数顺序有点特别——stackBlur.canvasRGBA(canvas, x, y, width, height, radius)，radius 值超过 10 就容易糊成一片，建议控制在 2–6 之间。

具体流程是：先用 uni.downloadFile 把图片下载到本地，再用 uni.getImageInfo 获取宽高，接着用 uni.createCanvasContext 把图片绘制到 canvas 上。模糊完成后，记得用 canvas.toDataURL('image/png') 导出，再赋给的 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.drawImage 多次调用：每次只画一个 blockSize × blockSize 的区域，再放大贴到目标位置。比如设 blockSize = 8，遍历时 i += 8, j += 8，每次从 (i, j) 取 1×1 像素，画到 (i, j) 开始的 8×8 区域。

这个方法不依赖像素读取，纯绘图逻辑，所有小程序平台都能稳定运行，性能也好得多。唯一的代价是最终效果是“像素风”，不是柔边模糊——但话说回来，“马赛克”本来的语义不就是这个吗？