blurify.js是一款小巧的js图片模糊效果插件。使用该js插件可以将任意图片进行模糊处理,它能够智能的在浏览器不支持CSS模糊滤镜的情况下,改用canvas来对图片进行模糊处理。

安装

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

npm i blurify                  
                

使用方法

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

<script src="dist/blurify.js"></script>
                
HTML结构

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

<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模式进行模糊处理。

blurify.js图片模糊插件的github地址为:https://github.com/JustClear/blurify