（新手入门指南）
微信小程序越来越受欢迎，许多开发者都会遇到给图片加模糊效果的需求。比如用户头像模糊、加载中的背景虚化、图片隐私保护等功能，都常常要用到模糊效果。但对于刚入门的小伙伴来说，应该如何从零开始实现呢？不用担心，本文将用最简单的语言，带着你一步步完成微信小程序中的图片模糊效果实现。
一、什么是图片模糊效果？为什么要用？
简单来说，模糊效果就是让图片变得模糊，不那么清晰，看起来像是被“涂抹”了的样子。就像你拿手指在玻璃上一样，物体的轮廓还在，但看不清楚细节。
那么为什么我们要给图片加模糊？这其实有很多用途，比如：
- 保护敏感内容，避免用户看见细节。
- 显示页面焦点，引导用户注意主内容。
- 做加载占位，等高清图加载完成再替换。
- 增加画面层次感，提升设计美感。
二、在微信小程序里实现模糊，有哪些办法？
由于微信小程序的限制，我们要实现模糊效果，常用的有以下几种方式：
- 使用微信小程序官方支持的
Image组件的blurRadius属性。 - 利用
canvas画布绘制然后做模糊处理。 - 后台处理图片，上传已经模糊好的图。
今天我们重点介绍第一种方式，因为它最简单，不需要复杂代码，适合新手快速上手。
三、模糊效果的简单实现—利用 blurRadius 属性
微信小程序的 Image 组件自带一个属性叫blurRadius，它可以直接给图片增加模糊效果。数字越大，模糊程度越高。
<image src="你的图片地址" blurRadius="20" />
看，就这么简单，只需要给你的图片标签加上blurRadius属性，设定一个数字，就能模糊图片了。
完整示例
<!-- 页面结构：index.wxml -->
<view class="container">
<image src="https://example.com/sample.jpg" blurRadius="15" mode="aspectFill" class="my-image"/>
</view>
<!-- 样式文件：index.wxss -->
.container {
padding: 20px;
text-align: center;
}
.my-image {
width: 300px;
height: 200px;
border-radius: 10px;
}
运行后你会发现，图片被模糊了一个固定的值，且效果非常自然。
四、blurRadius 属性的特点和限制
需要提醒你几点小知识：
- 兼容性：blurRadius是在微信小程序的基础库2.10.3版本后支持，所以请确认你的微信版本够新。
- 只支持数字：blurRadius只能使用数字，单位为像素。
- 不支持动态设置：blurRadius不能动态修改，目前版本需要重新渲染图片才能改变模糊。
- 只对Image组件有效：其他组件或者自定义渲染不支持这个属性。
五、进阶玩法—模糊切换与加载占位
在实际开发中，常见的需求是页面先显示一张模糊图片，等高清版本加载完成后替换掉模糊图。这种效果很好看，也提升用户体验。
实现这个功能，可以采用两张图片叠加的方式，或者用代码控制图片的 blurRadius 属性切换。
<view class="container"> <image src="模糊图地址.jpg" style="position:absolute;" blurRadius="20" mode="aspectFill" class="my-image" /> <image src="高清图地址.jpg" mode="aspectFill" bindload="onHighResLoad" class="my-image"/> </view>
你需要在js里监听高清图加载完成事件onHighResLoad，然后隐藏模糊图显示高清图。这样视觉上就像模糊慢慢变清晰。
六、如果想更酷一些，试试canvas模糊方案
如果你想实现更个性化的模糊操作，或者想结合滤镜、动画等效果，可以使用canvas实现。它的核心思路是把图片绘制在画布上，然后用代码控制像素的处理。
不过canvas部分涉及比较多的图像处理知识，需要一定基础，不适合完全小白。如果你感兴趣可以参考微信官方文档和社区教程。
canvas模糊示例思路简述：
- 通过
wx.createCanvasContext获取画布上下文。 - 用
drawImage绘制图片。 - 调用
canvasContext.filter = 'blur(5px)';（如支持CSS滤镜）或自己编写模糊算法处理。 - 渲染到页面，显示模糊效果。
这里就不展开讲代码细节了，等你有一定经验，再一步步学习。
七、新手常见问题答疑
问：图片加了blurRadius为什么没有效果？
答：首先确认微信基础库版本是否在2.10.3及以上，低版本不支持。其次，确认图片地址是否正确，或者图片载入失败。最后检查代码格式，属性名拼写是否正确。
问：能不能给视频或者其他组件加模糊？
答：blurRadius只支持Image组件，其他组件目前不支持。如果要给视频模糊，需要使用canvas或者后台处理。
问：模糊的程度怎么控制？
答：blurRadius的值决定模糊程度，数字越大越模糊。建议从5-20试起，效果比较好。
问：如何实现模糊效果渐变？
答：微信小程序本身没有动画支持blurRadius属性，想做渐变需要通过定时器分步修改模糊图层透明度和高清图透明度，模拟渐变效果。
问：使用canvas模糊复杂吗？要不要推荐资料？
答：canvas模糊比较复杂，需要一些图像处理基础，可以先了解微信小程序canvas基础，然后参考官方文档。网上也有不少教程讲解高斯模糊算法。
八、总结和拓展建议
总体来说，微信小程序给图片加模糊，使用内置的blurRadius非常方便，几行代码就能搞定。初学者可以先掌握这个方式，满足绝大部分需求。
当你更熟练之后，可以尝试用canvas，实现更灵活多样的模糊和图像效果。甚至可以配合动效、滤镜，打造个性化交互体验。
最后，开发小程序的过程是一步步摸索，遇到问题时多看看官方文档，多实践练习，会越来越得心应手。祝你早日成为微信小程序开发高手！
附：微信小程序图片模糊的基础代码模板
<!-- index.wxml -->
<view class="page">
<image src="https://example.com/sample.jpg" blurRadius="10" mode="aspectFill" class="blur-image"/>
</view>
<!-- index.wxss -->
.page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: eee;
}
.blur-image {
width: 320px;
height: 180px;
border-radius: 12px;
}