新手入门指南

微信小程序因其小巧便捷，越来越受到开发者和用户的喜爱。在我们制作小程序时，有时想对图片做出模糊效果，比如背景虚化、头像模糊或者屏幕过渡时的模糊处理，这样的效果不仅能提升视觉层次，也让界面看起来更柔和精致。对于新手来说，可能不知道从何入手，今天我们用最简单的语言，详细讲解如何在微信小程序中实现图片模糊效果，并附带几个常见问题的解答，助你快速上手。

一、模糊效果是什么？为什么要用模糊？

模糊效果，就是把图片变得不是那么清晰，就像拍照的时候对焦点对到了别处，其他部分看起来有点模糊。模糊能让界面更有层次感，例如把背景弄成模糊，前景内容会更加突出，减少视觉干扰。又或者做成一些过渡动画、加载效果的表现，让用户觉得界面更温柔舒适。

二、微信小程序支持图片模糊吗？

微信小程序本身的官方组件不直接提供模糊图片的属性，但我们可以利用几种简单的方法来实现这一效果：

• 用微信小程序内置的CSS样式过滤功能进行模糊
• 使用Canvas画布进行图片模糊处理
• 在服务器端或者第三方工具把图片预先处理成模糊图

我们这里重点介绍第一种和第二种，因为它们都是在小程序端完成，方便又灵活。

三、使用CSS的模糊滤镜实现图片模糊

其实，要给图片做模糊效果，最简单的办法就是用微信小程序支持的CSS样式滤镜（filter）。我们可以写一点样式，让图片看起来模糊。

步骤：

1. 在wxml文件中图片标签，比如：

<image src="你的图片路径" class="blur-image" />

2. 在对应的wxss样式文件写样式：

.blur-image &123;
  filter: blur(5px);
  width: 300px;
  height: 200px;
&125;

这里的blur(5px)代表模糊半径，数字越大，模糊越明显。你可以根据需要自己调节。

3. 刷新小程序页面，可以看到图片变得模糊了。

不过要注意：

• 微信小程序支持的基础库版本得足够新，一般7.0.7及以上就支持filter
• 某些老款手机或者版本旧的微信可能不完全支持
• filter模糊处理性能较好，适合做简单模糊

四、通过Canvas实现模糊图片（进阶一点）

如果你想要更灵活的模糊，比如只模糊图片某部分，或者利用多层模糊叠加，Canvas是个不错的选择。Canvas类似一个“画板”，你可以把图片先画到画板上，然后用代码对画板做模糊处理，再把结果显示出来。

这里给出一个简单的做法，实现整体图片模糊：

1. 先在wxml中准备一个canvas：

<canvas canvas-id="myCanvas" style="width:300px; height:200px;" />

2. 在js文件里，绘制图片并添加模糊：

const ctx = wx.createCanvasContext('myCanvas');
wx.getImageInfo({
  src: '你的图片地址',
  success(res) &123;
    ctx.clearRect(0, 0, 300, 200);
    // 先画图片
    ctx.drawImage(res.path, 0, 0, 300, 200);
    // 开始模糊
    ctx.setFilter('blur(5px)');
    ctx.draw(true);
  &125;
});

这里的setFilter('blur(5px)')是设置模糊半径，跟CSS类似。

温馨提示：

• Canvas模糊支持较新版本的微信基础库，建议7.0.9以上
• Canvas画图后，如果想拿到模糊图片路径，还可以用canvas.toTempFilePath方法生成临时文件
• 如果需要模糊局部或叠加效果，可通过多次绘制，或渐变遮罩实现

五、常见问题解答

1. 我的小程序用filter模糊没效果，是怎么回事？

很可能是微信基础库版本太低。请确认你的微信升级到了7.0.7及以上版本。可以在小程序里用wx.getSystemInfoSync看版本号。

2. 模糊的图片加载速度会不会变慢？

使用CSS filter模糊，对性能影响轻微，一般不会感觉卡顿。但是Canvas做模糊尤其处理大图片，可能会有一定的性能消耗，建议模糊图片尺寸不要超过屏幕大小。

3. 能不能只模糊图片的某一部分？

CSS filter对整个图片生效。如果想局部模糊，建议使用Canvas，在画布上先绘制图片，然后用代码用蒙版或截图方式模糊部分区域，这样灵活度更高。

4. 如果用户的微信版本不支持滤镜，怎么办？

可以考虑两种备选方案：

• 在服务器端预处理好模糊图片，用户使用时直接加载模糊版。
• 升级微信版本或者提醒用户升级。

5. 我想做背景虚化，怎么实现？

大多数应用会先把背景图用模糊滤镜处理，再叠加半透明遮罩，然后在前景内容上展示。这种方法比较简单：

<view class="bg-blur">
  <image src="背景图" class="blur-image" />
  
  <view class="overlay-content">
    这里写前景内容
  </view>
</view>

/* wxss样式 */

.bg-blur &123;
  position: relative;
  width: 100%;
  height: 300px;
&125;

.blur-image &123;
  filter: blur(8px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
&125;

.overlay-content &123;
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
&125;

六、总结

实现图片模糊效果在微信小程序中并不复杂，最简单就是利用CSS的filter:blur属性，非常适合入门和普通使用场景。要更加强大和灵活，就可以使用Canvas画板来处理，不过代码会稍微复杂点。此外，提前在服务器端做模糊图也是个备选方案，适合兼容性更强的项目。

希望这篇新手指南，能帮你快速掌握微信小程序图片模糊的基本用法。记住，多动手实践，试着调整模糊的半径大小，结合你的小程序界面设计，效果一定会很棒！如果你有更多问题，也欢迎留言交流。



—— 微信小程序实用技巧，专注简单好用 ——