Create Blurred Image Background Using jQuery And Canvas - blurIt

Create Blurred Image Background Using jQuery And Canvas - blurIt
File Size: 122 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

blurIt is a jQuery plugin for blurring image that loads a specified image onto an HTML5 canvas, blurs it and then uses the blurred image as a background on your webpage.

See also:

How to use it:

1. Create a container as the background of your webpage.

<div id="backgroud_div"></div>
#backgroud_div {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: #eee;
  z-index: 1;
}

2. Insert the source image into your webpage.

<img id="image_source" src="demo.jpg">

3. Load jQuery library and the jQuery blurIt plugin's JavaScript at the end of the webpage.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/blurIt.js"></script>

4. Call the plugin on the target container and pass the 'source image' and 'radius' parameters to the blurIt method.

$("#backgroud_div").blurIt( $("#image_source") , 10 );

This awesome jQuery plugin is developed by zkareemz. For more Advanced Usages, please check the demo page or visit the official website.