img-blur-part

图片模糊

Usage no npm install needed!

<script type="module">
  import imgBlurPart from 'https://cdn.skypack.dev/img-blur-part';
</script>

README

js实现图片模糊

安装

<script src = "https://cdn.jsdelivr.net/npm/img-blur-part@2.0.2/dist/index.min.js"></script>

使用

< script src = "https://cdn.jsdelivr.net/npm/img-blur-part@2.0.2/dist/index.min.js" > </script>
<script>
imgBlur("../example2.jpg",10, 0, 0, 100, 100, false).then((r) => {
        console.log(r);
    }) 
</script>

参数说明

  • 入参说明
imgBlur(src, blurNO, sx, sy, width, height, gauss).then((r) => {
    console.log(r);
})
参数 参数类型 默认值 参数说明
src string / 图片地址(一个可以读取到图片的地址,可为网络地址)
blurNO number 10 模糊度(0-100)
sx number 0 模糊区域左上角x坐标
sy number 0 模糊区域左上角y坐标
width number 100 模糊区域宽度
height number 100 模糊区域高度
gauss boolean fasle 是否启用高斯模糊算法
  • 反参说明

返回一个pomise实例, 可采用pomise.then(), 获取到处理后的图片base64数据。

效果

RUNOOB 图标

更多信息

实现背景和原理:https://www.zhangxinxu.com/wordpress/?p=10131
demo效果体验: https://www.zhangxinxu.com/study/202109/image-local-gaussian-blur-demo.php

版权说明

  1. 该项目参考了 张鑫旭 / 图像局部高斯模糊
  2. 该项目采用了MIT协议