更新记录

0.0.4（2025-12-09）

• fix: 修复糊弄问题

0.0.2（2024-12-20）

• chore: 更新文档

0.0.1（2024-12-20）

• init

平台兼容性

uni-app(4.83)

uni-app x(4.82)

lime-blur 图片高斯模糊组件

一个功能强大的图片高斯模糊处理组件，支持多种模糊方式和参数调整。可用于实现背景虚化、内容模糊、毛玻璃效果等多种视觉效果。组件提供了API调用和组件调用两种使用方式，适用于不同的应用场景。

文档链接

📚 组件详细文档请访问以下站点：

• 图片高斯模糊组件文档 - 站点1
• 图片高斯模糊组件文档 - 站点2
• 图片高斯模糊组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-blur
2. 导入后，App端需要自定义基座才能使用

代码演示

离屏API方式

在支持离屏canvas的环境通过API的方式调用，适用于APP、WEB、微信小程序、抖音小程序、支付宝小程序等平台。

import { gaussianBlur,type GaussianBlurOptions } from '@/uni_modules/lime-blur'

gaussianBlur({
  src: 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/129831/4/33281/106962/63c63065F0d8fa250/da5d88be0508fb55.jpg',
  radius: 5,
  success(url) {
    console.log('处理后的图片', url)
  }
} as GaussianBlurOptions)

非离屏API方式

在非离屏canvas的环境支持通过API可传入canvasId，需要先在页面中创建canvas元素。

<canvas id="canvas" canvas-id="canvas" type="2d" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>

import { gaussianBlur, type GaussianBlurOptions } from '@/uni_modules/lime-blur'

const canvasWidth = ref(300)
const canvasHeight = ref(300)

gaussianBlur({
  canvasId: 'canvas',
  component: getCurrentInstance().proxy, // 或this
  src: 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/129831/4/33281/106962/63c63065F0d8fa250/da5d88be0508fb55.jpg',
  radius: 5,
  onSize(width, height) {
    // 监听图片的尺寸，设置canvas尺寸
    canvasWidth.value = width
    canvasHeight.value = height
  },
  success(url) {
    console.log('处理后的图片', url)
  }
} as GaussianBlurOptions)

组件方式

直接使用组件进行图片模糊处理，可以通过滑块动态调整模糊程度。

<image class="image" :src="path" v-if="path" mode="widthFix"></image>
<slider :value="radius" @change="sliderChange" :step="5" :max="100" :min="0" />
<l-blur :radius="radius" gaussian @success="success" :src="src"></l-blur>

const src = '/static/mv2.jpg';
const path = ref('')
const radius = ref(10)

const success = (url) => {
  console.log('url', url)
  path.value = url
}

const sliderChange = (e) => {
  radius.value = e.detail.value
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-blur/components/lime-blur -->
<lime-blur />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

GaussianBlurOptions 选项

常见问题

• 在App端使用需要自定义基座
• 确保图片资源可以正常访问，网络图片需要确保没有跨域限制
• 模糊半径过大可能会影响性能，建议根据实际需求适当调整
• 非离屏canvas方式需要手动设置canvas尺寸

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助