Vague.js 是一个基于 Canvas 的模糊效果库，可以很方便地为网页中的图片、背景进行高斯模糊处理。在前端应用中，这样的效果通常被用来实现一些特效和美工设计，比如弹窗背景虚化、滤镜效果等。
安装 Vague.js
你可以通过 npm 包管理器来安装 Vague.js，使用以下命令：
npm install vague.js --save
示例代码
下面我们来看一个简单的例子：添加一个背景图片并对其进行模糊处理。
HTML 代码：
<div id="bg" style="background-image: url('path/to/image.jpg')"></div>JavaScript 代码：
import Vague from 'vague.js';
const vague = Vague({
el: "#bg", // 模糊处理的元素
intensity: 10, // 模糊强度
});
vague.blur();上述代码中，首先导入 Vague.js 库，并创建一个 Vague 实例，指定要进行模糊处理的元素和模糊强度。然后调用 blur() 方法开始进行模糊处理。
API 文档
Vague(options)
构造函数，创建一个 Vague 对象。
options
Type: Object
el
Type: String or HTMLElement
要进行模糊处理的元素，可以是选择器字符串或者 DOM 元素。
intensity
Type: Number
模糊强度，取值范围为 0 到 100，默认为 10。
forceSVGUrl
Type: Boolean
是否在 Safari 浏览器中使用 SVG 滤镜模拟模糊效果。默认值为 false。
blurRadius
Type: Number
高斯模糊半径，取值范围为 0 到 100，默认为 0，表示自动计算半径。
defaultStyles
Type: Object
样式对象，用于设置模糊元素的默认样式。
Vague.blur()
开始进行模糊处理。
Vague.unblur()
取消模糊处理。
总结
Vague.js 是一个功能强大、易于使用的模糊效果库，提供了丰富的 API，可以帮助开发者轻松地实现各种模糊特效。本文介绍了 Vague.js 的基本使用方法和 API 文档，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36047