微信小程序现在非常火，很多朋友都想给自己小程序里的图片做一些酷炫的效果。模糊效果就是其中最受欢迎的一个，能让图片看起来更有层次感，或者做成背景效果，突出前面的内容。很多小伙伴刚开始学微信小程序，觉得做这个效果很复杂。其实不用怕，我这篇教程用最简单的话教你一步一步干，保证零基础也能看懂。

一、什么是图片模糊效果？

简单讲，模糊效果就是让图片变得不那么清晰，好像被蒙了一层纱。这样做的目的很多，比如做背景时让主体更醒目，或者做渐变的过渡感。你在手机上的照片编辑软件里见过类似效果，其实微信小程序里也能做到。

二、微信小程序里如何开始做模糊效果？

微信小程序用的语言主要是“WXML”和“WXSS”，类似网页上的HTML和CSS。实现模糊图片，主要用到小程序提供的“滤镜”功能，或者用画布（Canvas）来绘制模糊图像。这里我先介绍最简单的两种方法。

方法一：使用滤镜属性

微信小程序支持给图片直接加上模糊滤镜，通过设置CSS样式的“filter: blur(数值px)”即可实现，非常简单。

<image src="你的图片路径" style="width:300px; height:200px; filter: blur(5px);" />
  

这里的5px代表模糊程度，数字越大图片越模糊。你只要把图片的style里加上这个“filter: blur(5px)”就行了。

方法二：用Canvas自己画模糊图

如果你想要更灵活控制模糊效果，比如模糊渐变或者只模糊部分图片，就需要用“画布”了。画布是微信小程序提供的一个能画图的组件，你可以把图片先画到画布上，然后用代码给画布做模糊处理。这种方法稍微复杂一些，但也是新手能学会的。

简单来说步骤是：

1. 先创建一个canvas画布。
2. 用代码把图片画到canvas上。
3. 然后用canvas的API给图片应用模糊效果。

这里就先不深挖了，后面有示例代码方便你参考。

三、微信小程序模糊图片的步骤详解

1. 创建项目和页面

首先打开微信开发者工具，新建一个微信小程序项目（不懂的话百度“微信开发者工具下载安装”）。新建好项目后，创建一个页面，比如叫“blurImage”。

2. 准备图片资源

把你想模糊的图片放到项目的“images”文件夹下，方便引用。

3. 用方法一快速实现模糊图片

打开“blurImage.wxml”，写入：

<view class="container">
  <image src="../../images/your-photo.jpg" class="blur-img" />
</view>
  

然后到“blurImage.wxss”添加样式：

.container {
  padding: 20px;
  text-align: center;
}

.blur-img {
  width: 300px;
  height: 200px;
  filter: blur(8px);
  border-radius: 10px;
}
  

运行页面，你就能看到模糊效果了，是不是超简单？

4. 用Canvas实现模糊效果（进阶版）

下面的代码示例用canvas画布，把图片渲染上去并模糊：

blurImage.wxml

<view class="container">
  <canvas canvas-id="myCanvas" style="width: 300px; height: 200px; border-radius: 10px;" />
</view>
  

blurImage.js

Page({
  onReady {
    const ctx = wx.createCanvasContext('myCanvas', this);
    const imgPath = '../../images/your-photo.jpg';

    wx.getImageInfo({
      src: imgPath,
      success: (res) => {
        // 绘制图片
        ctx.drawImage(res.path, 0, 0, 300, 200);
        // 使用draw方法渲染
        ctx.draw(false,  => {
          // 添加简单模糊处理, 这里通过在图上多次绘制实现模糊
          for(let i = 0; i < 5; i++) {
            ctx.setGlobalAlpha(0.1);
            ctx.drawImage(res.path, -i, -i, 300, 200);
            ctx.drawImage(res.path, i, i, 300, 200);
          }
          ctx.draw;
        });
      }
    });
  }
})
  

这里是用“多次绘制重叠”的办法，让图片看起来模糊。canvas模糊是高级点的技巧，想学更复杂的，可以找专业图像处理库。

四、常见问题解答

1. 为什么有的手机模糊效果显示不一样？

不同手机的微信版本和系统对滤镜支持有差异，特别是安卓机可能鞥有些性能限制，会导致滤镜不够平滑或失真。建议多测试几款手机。

2. 直接给image加filter，图片突然变模糊但加载还是清晰的，这正常吗？

这是正常的，filter只是给显示的视觉添加模糊，不改变图片的文件本身，也不影响图片尺寸。

3. 能不能对图片的部分区域模糊？

方法一不能实现局部模糊，只整体模糊。要实现局部模糊，你就需要用Canvas技术，自己写代码处理指定区域。

4. 有办法让模糊效果渐变显示吗？

实现渐变模糊需要结合Canvas用渐变色遮罩叠加，或者用分层图片结合滤镜实现，稍微有点难度，需要代码能力。

5. 图片太大，模糊后性能会有影响吗？

图片越大，模糊处理消耗性能越多，尤其是Canvas方式更明显。建议先把图片压缩到合适尺寸再使用。

五、给新手的实用小贴士

• 微信开发者工具自带预览和调试，改代码试效果很方便，开发时多用它。
• 写样式时，可以先把图片尺寸固定好，再慢慢调模糊度，找到最佳视觉。
• 多翻看微信官方文档里“滤镜”和“canvas”章节，原理多懂一点，以后提升不困难。
• 遇到问题多搜索相关问题，也可以参考很多开发者社区或者公众号的经验文章。
• 做好文件目录管理，放图片放得整齐，引用路径准确，避免调试时找不到资源。

六、总结

图片模糊效果不仅能让你的微信小程序颜值加分，还能提升用户体验。最简单的办法就是直接给image标签加个“filter: blur”样式，零基础最快速上手。想更专业，可以学习Canvas图像处理技巧，但需要相对多些练习和理解。无论哪种方式，动手试试都比看纸上谈兵强，祝你早日做出让人惊艳的模糊图片效果！

— 本文教程分享于微信小程序开发入门系列，限时抢学，不容错过！