Creating a blur effect on image

JavaScript
1

Hi all, I wonder if it is possible to make a JS blur effect on an image while it’s moving.

It probably is but I haven’t seen it done before with JS, only ActionScript for Flash, I wonder what is the reason for this.

So the way I have been thinking this could be achieved is by loading several times the same image giving them transparency and offsetting them a pixel or two from each other.

Any input or ideas regarding this issue would be greatly appreciated.

2

You could use something like the Pixeltastic library to perform blurs, it’s JS creating a canvas element. Since JS doesn’t have any real image manipulation, canvas is the real hero here.
Pixastic: JavaScript Image Processing : Blur
Pixastic: JavaScript Image Processing : Blur Fast

While you could certainly apply animation effects to a container of canvas, or use canvas to move the elements themselves, there might be some performance issues there, especially with larger images.

To perform a manual blur as you described, using JS & transparency you could insert 8 images and transpose them on the top with an offset.

I knocked up a super quick example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Testing img blur</title>
    <style>
		#container { position:relative; width:300px; height:300px; overflow:hidden; top:150px; left:150px; }
		#container img { position:absolute; opacity:0.125; }
		#container #i0 { opacity:1; top:0; left:0; }
		#i1 { top:-2px; left:-2px; }
		#i2 { top:-2px; left:0px; }
		#i3 { top:-2px; left:2px; }
		#i4 { top:0px; left:-2px; }
		#i5 { top:0px; left:2px; }
		#i6 { top:2px; left:-2px; }
		#i7 { top:2px; left:0px; }
		#i8 { top:2px; left:2px; }
		</style>
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function(){
			amt = 0;
			$("#container").click(function(){
				amt = amt == 150 ? -150 : 150;
				$(this).animate({"left":$(this).position().left + amt, "top":$(this).position().top + amt, }, 1000);
			})
		});
	</script>
</head>
<body>
<div id="container">
	<img src="http://placekitten.com/300/300" id="i0"/>
	<img src="http://placekitten.com/300/300" id="i1"/>
	<img src="http://placekitten.com/300/300" id="i2"/>
	<img src="http://placekitten.com/300/300" id="i3"/>
	<img src="http://placekitten.com/300/300" id="i4"/>
	<img src="http://placekitten.com/300/300" id="i5"/>
	<img src="http://placekitten.com/300/300" id="i6"/>
	<img src="http://placekitten.com/300/300" id="i7"/>
	<img src="http://placekitten.com/300/300" id="i8"/>
</div>
</body>
</html>

Of course you’d generate the additional images with JS and generate the styles depending on what level of blur you wanted.

This is only a very basic level of blur though, nothing like what you could achieve using Canvas :wink:

3

Thank you for this info, appreciated!