Image blur using canvas html5

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

The HTML

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

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

Well thats exactly what we will be looking at next,

New revised Markup

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

Usage

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.