Efecto Blur con Canvas

Dentro de los últimos descubrimientos de la semana encontré a RDIO, una aplicación para escuchar música muy versátil y simple de usar. La interfaz es muy limpia y ofrece una buena cantidad de albums muy bien ordenados.

Además de la gran utilidad de RDIO, lo que más me llamó la atención fue lo "sexy" de la interfaz y en particular el efecto que la aplicación utiliza para mostrar el detalle del disco que estás escuchando. Utiliza un efecto "Blur" sobre el "cover" del album y lo deja de background, así:

Ahí es donde me pregunté: ¿Y cómo harán este efecto? Claro, busqué en el código fuente y encontré una imagen sobre un canvas, así que eso fue lo que busqué. Creo que fue uno de los primeros resultados con los que me topé, un plugin listo para hacer el efecto: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

El plugin básicamente lo que hace es calcular pixel por pix…no, mentira, no caché como funciona; pero lo apliqué a mi sitio web para hacer el mismo efecto en la vista de páginas para el portafolio, miren: http://alvaroveliz.cl/portfolio/malos-pasos-downhill-sur (parece que me fuí al cerdo con el blur)

Lo que hice fue usar el "featuredImage" y hacer un "canvas" por defecto en el layout, luego, lo usé así:

stackBlurImage('featuredImage', 'canvasBg', 60, 1);

Los resultados quedan a la vista y no necesita tanta carga del explorador.

¡Espero que les sirva!

Blog, Tips, Tips Javascript
Menos de un minuto