# 图像局部高斯模糊

**Repository Path**: zhizous/local-blur

## Basic Information

- **Project Name**: 图像局部高斯模糊
- **Description**: 指定图像在特定范围内高斯模糊，并且模糊的边缘是柔化的，兼容 IE 浏览器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.zhangxinxu.com/wordpress/?p=10131
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2021-10-02
- **Last Updated**: 2022-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 图像局部高斯模糊

### 介绍
指定图像在特定范围内高斯模糊，边缘羽化，兼容 IE、Safari 浏览器。

### 使用说明

1.  引入 localBlur.js
```js
<script src="./localBlur.js"></script>
```
2.  调用 localBlur 方法
```js
localBlur(source, radius, bounding, output);
// 或者
localBlur(src, radius, bounding, callback);
```

**其中**

<dl>
    <dt>source</dt>
    <dd>表示原始图像资源，可以是 <code>&lt;img&gt;</code> 图像元素，也可以是 <code>&lt;canvas&gt;</code> 画布元素。</dd>
    <dt>src</dt>
    <dd>表示原始图像的 URL 地址，注意跨域的问题。</dd>
    <dt>radius</dt>
    <dd>数值，必需，表示模糊半径。</dd>
    <dt>bounding</dt>
    <dd>数组，可选，表示模糊的局部区域范围，由 4 个值组成，<code>[x, y, width, height]</code>, 分别表示区域的左上角坐标和宽高大小，例如 <code>[20, 20, 240, 120]</code>，表示图像上横坐标 20px，纵坐标 20px为左上角，宽度是 240px，高度是 120px 的矩形区域发生模糊。</dd>
    <dt>output</dt>
    <dd>显示最终模糊效果的 <code>&lt;canvas&gt;</code> 画布元素。</dd>
    <dt>callback</dt>
    <dd>显示最终模糊效果的回调函数，支持一个参数，表示包含模糊效果的 <code>&lt;canvas&gt;</code> 画布元素。</dd>
</dl>


### 更多信息

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