小巧实用的图片模糊插件blurify.js

查看演示立即下载

插件描述：blurify.js是一款小巧实用的js图片模糊效果插件。使用该js插件可以将任意图片进行模糊处理。

可以通过npm来安装blurify.js图片模糊插件。

1	`npm i blurify`

在页面中引入blurify.js文件。

为需要添加牧户效果的图片设置class类，并通过data-src属性指向该图片。

1	`<img` `data-src="img/1.jpg"` `alt=""` `class="blurify">`

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化blurify.js图片模糊插件。

new blurify({
    images: document.querySelectorAll('.blurify'),
    blur: 6,
    mode: 'auto',
});

blurify.js图片模糊插件的可用配置参数如下：

images：需要进行模糊的图片对象。

blur：模糊的等级，从1-6。

mode：模糊的模式。可以是：

css：默认值，使用css滤镜来对图片进行模糊处理。

canvas：使用canvas处理图片，导出base64码。

auto：首先使用css滤镜模式，浏览器不支持就使用canvas模式进行模糊处理。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com