更新记录

1.0.0（2024-12-04）

2024-12-14

首次发布 V1.0.0

平台兼容性

bsx-blur 适用于uniapp x的Android 端Blur处理

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS

实现

本插件使用Blurry库 实现兼容性的视图模糊处理功能（内部使用的是RenderScript）支持Android 5+版本，感兴趣的可以看下源库。另，Android 12+ 系统本身提供有了renderEffect 方法去处理模糊，效果也挺好的。还有就是Android提供了RenderScript函数的替代工具包RenderScript Intrinsics Replacement Toolkit ，源码的；不过，Github上有人封装了下，renderscript-toolkit 感兴趣的也可以看看。

话回此插件，本人也是小白，纯粹搬运代码成分较多！望各位大佬手下留情~

方法介绍

统一返回

{
    status: string, // succeed or failed
    message: string  // 处理的信息
} as UTSJSONObject

调用示例

import { bsxBlurScreenOverlay, bsxBlurFrmViewByBitmap, bsxBlurFrmViewToView, bsxBlurFrmBitmapDynamic, 
    bsxClearViewBlur, bsxBlurRemoveRV } from "@/uni_modules/bsx-blur"

<view class=""  style="margin-top: 20px; display: flex;flex-direction: row; justify-content: space-around;align-items: center;">

    <view id="image1" class="" style="width: 45%;">
        <image id="blurimage1"  src="/static/写乐保介.jpg" mode="scaleToFill" style="width: 100%;"></image>
            <!-- 如果想调用清除 blur 则应使用遮罩image -->
        <image id="blurimageadd" mode="scaleToFill" style="position: absolute; width: 100%;"></image>
    </view>
    <view id="image2" class="" style="width: 45%;">
        <image id="blurimage2" src="/static/写乐保介.jpg" mode="scaleToFill" style="width: 100%;"></image>
    </view>
</view>

<view class="" style="margin-top: 20px;display: flex;flex-direction: row; justify-content: space-around;align-items: center;">
    <view id="image3" class="" style="width: 45%;">
        <image id="blurimage3"  src="/static/写乐保介.jpg" mode="scaleToFill" style="width: 100%;"></image>
    </view>
    <view id="image4" class="" style="width: 45%;">
        <image id="blurimage4" src="/static/写乐保介.jpg" mode="scaleToFill" style="width: 100%;"></image>
    </view>
</view>

bsxBlurFrmViewByBitmap("image1", "blurimageadd", 2, 5, "")

bsxBlurFrmViewToView("image2", "blurimage2", 20, 5, "")

bsxBlurFrmViewByBitmap("image3","blurimage3",3, 1, "#59ffff00")

bsxBlurFrmViewByBitmap("image4","blurimage4",3, 1, "#59ffb6c1")

// 可以接收返回值 看处理的结果
let res = bsxClearViewBlur('blurimageadd')
console.log('clearViewBlur', res)

场景实现

遮罩层背景动态模糊（顶部栏背景动态模糊、底部栏背景动态模糊、弹出对话框背景模糊、抽屉层背景模糊等）

这种场景勉强可以用用，我做了测试，计时间隔100ms 去执行动态背景模糊。间隔太低，卡，间隔太高，拖影顿挫感强。实际项目不建议用！

没有找到好的动态模糊库，如果有的话，请分享一下哦。