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

所属分类:媒体-图像

 1129  14  查看评论 (0)
小巧实用的图片模糊插件blurify.js ie兼容9

blurify.js

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

npm i blurify

使用方法

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

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

相关插件-图像

shearphoto1.3截取头像,拍照截图,美工切图插件

shearphoto1.3截取头像,拍照截图,美工切图插件,本代码均采用原生JS编写 绝对不含第三方代码,绝对超越JCROP和富头像, 如果你要找截图插件,除了shearphoto,你别为选择 是一个专门为前端截图开发的功能齐全,接口丰富的专业插件
  图像
 10953  87

jQuery缩放滑动幻灯片类似淘宝图片放大效果

使用jQuery创建一个档案(Portfolio)缩放滑动幻灯片类似淘宝图片放大效果
  图像
 9507  16

nanoGALLERY: 轻松地实现图像廊

nanoGALLERY jquery 插件:非常方便地实现图像廊。它是已启用、快速响应、快速的触摸,它支持云存储。
  图像
 10841  14

jQuery SVG图像插件SVGMagic

这种易于使用的jQuery插件将创建一个后备SVG图像到您的网站上。当插件注意到访问者的浏览器不支持SVG图像,将更换新的PNG图像。
  图像
 13858  6

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复