Cut & Paste Blur Image effect
|
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.
Examples:
 No blur |
Blur radius: 15 |
Blur radius: 50 |
|
Mouse over image to blur out/ in |
Directions
Step 1: Copy the below code into the <head> section of your page:
The code above references two external .js files. Download them below:
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]):
blurradiusshould be an integer greater than 0, where 0 equals no blur, and the higher the integer, the more intense the blur.durationis an optional parameter that when defined gradually transitions the image to the specifiedblurradiussetting. 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:
<link rel="stylesheet" type="text/css" href="checkboxtoggler.css"
/>
<script type="text/javascript" src="StackBoxBlur.js"></script>
<script type="text/javascript" src="StackBoxBlurWrapper.js"></script>
<script>
window.onload = function(){ // when window loads
var hayden1 = new stackBoxBlurIt('hayden1') //
reference original image to blur
var checkbox1 = document.getElementById('checkbox1')
// reference checkbox to toggle image blur
if (checkbox1.checked == false){ // if checkbox isn't checked when page is
loaded
hayden1.blurit(40) // blur it
}
checkbox1.onchange = function(){ // whenever checkbox state changes
hayden1.blurit( this.checked? 0 : 40 ) // blur or not to blur
}
}
</script>
<body>
<img id="hayden1" border="0" src="hayden.jpg"
width="280" height="350">
<div class="toggler">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</body>
You can download checkboxtoggler.css by right clicking it, and selecting "Save As".
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:
<script type="text/javascript" src="StackBoxBlur.js"></script>
<script type="text/javascript" src="StackBoxBlurWrapper.js"></script>
<script>
window.onload = function(){
var hayden2 = new stackBoxBlurIt('hayden2').blurit(40)
hayden2.onmouseover = function(){
this.blurit(0, 2000)
}
hayden2.onmouseout = function(){
this.blurit(40, 2000)
}
}
</script>
<body>
<img id="hayden2" border="0" src="hayden.jpg"
width="280" height="350">
</body>