G’day,
While I was looking around for something with my not so relevant queries, I found StackBlur which does pretty good Job to blur an Image by introducing a Canvas layer on top of the Image. I guess it make sense to do it that way. The results is something that took me by surprise. They are pretty close to what we are used to in Photoshop filter called Gaussian blur.
Let me take you through this and we will also build a jQuery plugin to generalize few things in the end.
A simple functional Image blur example can be reached from the link provided below
Demo
You can view the demo here
http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example.html
Now that you’ve seen the demo lets cover it in detail.
First get hold of latest StackBlur from here
Scripts and Styles
Below are the scripts and stylesheet that you will need to recreate the example
|
1 2 3 4 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="StackBlur.js"></script> <!-- Given that StackBlur.js is in current working folder --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/flick/jquery-ui.css"/> |
|
1 |
The HTML
|
1 2 3 |
<div style="position: relative;" id="imgcontainer"> <div id="slider-vertical" style="height: 620px;right:0;position: absolute;z-index: 100;"></div> <img id="yuvraaj" src="yuvraaj.png" style="position: absolute;top:0;left: 0;width:940px;height:627px"> |
|
1 2 3 4 |
<div id="canvascontainer"> <canvas id="canvas"></canvas> </div> </div> |
The above stuff can be reduced to just couple of lines of code, but I just copy pasted from my code when I was trying to do a few bits and pieces but you’ll get the Idea.
The CSS
Beautify it a little bit, but thats just me, for others I am spoiling the look and feel 🙂
The JavaScript
Below is the Javascript that we need to introduce a slider and stuff
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(document).ready(function () { var imgPostition = $("#yuvraaj").position(); $("#yuvraaj").load(function () { $("#imgcontainer").css({ "height": parseInt($("#yuvraaj").height()), "width": parseInt($("#yuvraaj").width()) }); $("#canvascontainer").css({"position": "absolute", "top": imgPostition.top, "left": (imgPostition.left), "height": parseInt($("#yuvraaj").height()), "width": parseInt($("#yuvraaj").width()) }); $("#slider-vertical").slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 0, slide: function (event, ui) { stackBlurImage('yuvraaj', 'canvas', ui.value, false); } }); stackBlurImage('yuvraaj', 'canvas', 0, false); }); }); |
What above code does is, it is introducing a slider and binding the stackBlurImage() function to the slide event so that our slider value become the blur radius.
Above works but what if we have something similar to this
|
1 |
jQuery("#yuvraaj").jImgBlur({blurStrength:8}) |
Well thats exactly what we will be looking at next,
New revised Markup
|
1 |
<img id="yuvraaj" src="yuvraaj.png"> |
Our Little jQuery Plugin Code
Please note that this plugin does not auto generate the slider control, slider control that is used in the example above, it from jQuery UI library
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery.fn.jImgBlur = function(settings){ settings = jQuery.extend({blurStrength:3},settings); var theID = function (id) { return 'canvas_id-'+id; }; this.each(function(){ var root = jQuery(this); if(root.attr("id") == null || root.attr("id") == "") root.attr("id",'img-'+theID); theID = theID(root.attr("id")); if(jQuery("#"+theID).length == 0) { jQuery("<canvas id='"+theID+"'></canvas>").insertAfter(root); $("#"+theID).css({"position": "absolute", "top": root.position().top, "left": root.position().left, "height": parseInt(root.height()), "width": parseInt(root.width()) }); } stackBlurImage(root.attr("id"), theID, settings.blurStrength, false); }); }; |
Usage
|
1 2 3 4 5 6 |
$(window).load(function () { jQuery("#yuvraaj").jImgBlur({blurStrength:0}); setTimeout(function(){jQuery("#yuvraaj").jImgBlur({blurStrength:10});},2000) }); |
Here is a bit of fun app where we increase or reduce blur to give a nice effect
Demo
http://jaspreetchahal.org/examples/jquery-examples/jblur/image_blur_example_on_off.html
I hope this helps you one way or another. I know the code above is not perfect but you are there to perfect it.
I’ve put the above code on
Share your implementations with readers, leave your comments.
Cheers.
Leave a Reply