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数据。
效果
更多信息
实现背景和原理:https://www.zhangxinxu.com/wordpress/?p=10131
demo效果体验: https://www.zhangxinxu.com/study/202109/image-local-gaussian-blur-demo.php
版权说明
- 该项目参考了 张鑫旭 / 图像局部高斯模糊。
- 该项目采用了MIT协议