Description: This Blur Image script lets you
easily blur an image by varying intensities, either instantly or gradually. It
uses the excellent
StackBoxBlur script to power the effect, and works in all
major browsers that support HTML5`s canvas element. The script works by
replacing the original image you wish to blur with a canvas equivalent instead
(dynamically added to the page following the image by the script), then
operating on that canvas instead. In browsers that don't support the canvas
element, the image is left alone.

Note: In IE (as of IE11), the blur algorithm runs rather
choppily, especially if you're gradually blurring in or out. In IE then you
might choose to change the blur behaviour to instantly instead. In Google
Chrome, the blur effect is only applied when the image is viewed online, versus
offline/ local hard drive.

Step 2: Then to blur an image, call the
constructor function new stackBoxBlurIt(imageid) with the ID of the
image element in question after the page or image has loaded. For example:

<script>

window.onload = function(){ // call after window has loaded (or use jQuery etc
and run when DOM has loaded)
var blurimage1 = new stackBoxBlurIt('blurimage')
blurimage1.blur(15) // set blur radius to 15 (0 = no blur, higher the
number, more the blur)
}

</script>

<img id="blurimage" src="hayden.jpg" />

When you call new stackBoxBlurIt() on an image (using its ID
value), the script hides the actual image and shows a canvas element in its
place. It exposes a blur() method to then blur the "replica" image
by the desired blur radius:

blur(blurradius, [duration]): blurradius should be
an integer greater than 0, where 0 equals no blur, and the higher the
integer, the more intense the blur. duration is an optional
parameter that when defined gradually transitions the image to the specified
blurradius setting. It should be an integer denoting the
transition duration in milliseconds (so 1000 = 1 second for example).

As a tip, you can instantiate stackBoxBlurIt() on an image and
blur it all at once:

var blurimage1 = new stackBoxBlurIt('blurimage').blur(15)

stackBoxBlurIt() when invoked returns a reference to the canvas element
dynamically added to the page. This means you can further manipulate the canvas
via standard JavaScript, such as do the following:

blurimage1.style.border = "2px solid black"

Moving on, some of you may be interested in recreating the last two demos
above, namely, the check box toggler blur, and the mouse over blur in and out
examples.
Lets walk through how those two demos were put together.

Creating a checkbox toggler blur

This example simply consists of a CSS3 styled single checkbox that we
hook up to some JavaScript logic to blur the desired image conditionally
based on the state of the checkbox. With the code of Step 1 above
intact, add the following stylesheet, JavaScript logic and HTML markup
to complete the set up:

Mouse over blur in and out

This example is created simply by attaching JavaScript's mouseover and
mouseout events to the canvas element returned when instantiating stackBoxBlurIt(),
and making use of the blur() method's second parameter to gradually
blur into the desired blur radius: