A JS Library For Blur Effect On Images – blurify.js

Preview:

Description:

blurify.js is a lightweight JavaScript library that gives you the ability to apply a blur effect on any images using either canvas or CSS filters (if supported).

Install it via package managers:

# Yarn
yarn add blurify
# NPM
$ npm install blurify
# Bower
$ bower install blurify

How to use it:

Load the JavaScript file blurify.js in the document when needed.

<script src="blurify.js"></script>

Apply a default blur effect to your image.

new blurify({
  images: document.querySelectorAll('.blurify')
});

Config the blur effect. A larger value will create more blur.

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

Set the blur mode:

new blurify({
  images: document.querySelectorAll('.blurify'),
  mode: 'auto', // or 'canvas', 'css'
});

Changelog:

09/23/2018

• Refactor