LimeUI+1.2.0

主题

LimeBlur 图片高斯模糊组件 ​

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

离屏API方式 ​

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

js
import { gaussianBlur, 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元素。

html
<canvas id="canvas" canvas-id="canvas" type="2d" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
js
import { gaussianBlur, 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)

组件方式 ​

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

html
<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>
js
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
}

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-blur组件标签
lime-blur演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
src图片地址，支持网络和本地路径string-
radius模糊半径，值越大越模糊number0
gaussian是否使用高斯模糊，false为堆栈模糊，只对非离屏canvas生效booleantrue

Events 事件 ​

事件名说明回调参数
success模糊处理成功时触发url: string
fail模糊处理失败时触发error: any

GaussianBlurOptions 选项 ​

参数说明类型默认值
src图片地址，网络或本地string-
radius模糊半径，越大越糊number0
gaussian是否使用高斯模糊，false为堆栈模糊，只对非离屏canvas生效booleantrue
canvasIdcanvas 元素的 id 属性string-
component组件或页面实例，限定在什么范围内查找idobject-
success处理成功后的回调函数(url: string) => void-
fail处理失败后的回调函数(error: any) => void-
onSize图片加载后获取尺寸的回调函数(width: number, height: number) => void-

常见问题 ​

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

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码