Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Blur Image effect

Credit: JavaScript Kit

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]): 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:

<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>

 


JavaScript Tools:
Site Info


CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info