# js-drop-canvas-blur

**Repository Path**: pipepandafeng/js-drop-canvas-blur

## Basic Information

- **Project Name**: js-drop-canvas-blur
- **Description**: 使用js实现拖拽，cavans制图，图片高斯模糊。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2021-10-11
- **Last Updated**: 2023-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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>
```

## 参数说明

* 入参说明

```js
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 图标](./blur.png)

## 更多信息

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

## 版权说明

1. 该项目参考了 [张鑫旭 / 图像局部高斯模糊](https://gitee.com/zhangxinxu/local-blur)。
2. 该项目采用了MIT协议