Dynamic, client-side image blur effect with and Pixastic JavaScript library.
A Pen by Nathan Hackley on CodePen.
Dynamic, client-side image blur effect with and Pixastic JavaScript library.
A Pen by Nathan Hackley on CodePen.
<h1>Dynamic Image Blurring with JS</h1> | |
<p>This is a demo of dynamic (in the sense that it works with any image, and processing is performed on the user's browser) image blurring with vanilla JavaScript.</p> | |
<p>I saw this effect used beautifully on <A href="http://rdio.com">Rdio</a>, where they have (low res) track/album artwork form part of the page's background (100% width; ~1440px wide!)</p> | |
<p>My implementation achieves that effect using a JavaScript image processing library called <a href="http://www.pixastic.com/">Pixastic</a>. The only disadvantage is it doesn't offer any callback functions, so you can't hide the image 'til it's processed... Or maybe you can, and I just don't know how. I am definitely going to play with this more.</p> | |
<h2>Try it!</h2> | |
<p>Replace the <code>src</code> attribute of the <code><img></code>, and see it blur.</p> | |
<p>Modify the blur amount (between 0 and 5, float) in the JS to the far right.</p> | |
<img id="blur-me" src="http://upload.wikimedia.org/wikipedia/en/thumb/f/fe/Audiovideodisco.jpg/220px-Audiovideodisco.jpg" /> |
var img = document.getElementById('blur-me'); | |
if(img.complete) { | |
var newimg = Pixastic.process( | |
img, | |
"blurfast", | |
{ | |
amount: 0 | |
} | |
); | |
} |
/* The image I used here is only 128x128 natively, but with this blurring technique it could be used as a 1000x1000 background image! Here, I'm enlarging the image 2x its original size. Still looks good. */ | |
img { | |
width: 440px; | |
} | |
/* CSS below here is just presentational, for the demo. It's not relevant. */ | |
body { | |
color: #444; | |
font-family: sans-serif; | |
} | |
h1, p, h2 { | |
width: 51%; | |
float: left; | |
margin: 0 0 1em; | |
} | |
img { | |
float: right; | |
} |