更新记录

0.0.2（2024-12-20）

• chore: 更新文档

0.0.1（2024-12-20）

• init

平台兼容性

lime-blur 图片高斯模糊

• 本插件是对图片进行高斯模糊处理

安装

在插件市场导入，引入后（APP）需要自定义基座

代码演示

离屏API方式

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

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

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:number, height:number) {
        // 监听图片的尺寸，设置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 success = (url: string) => {
    console.log('url', url)
    path.value = url
}

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

    // gaussianBlur({
    //  src: 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/129831/4/33281/106962/63c63065F0d8fa250/da5d88be0508fb55.jpg',
    //  radius: 5,
    //  success(url) {
    //      path.value = url
    //  }
    // } as GaussianBlurOptions)
}

Options