Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

¿Cómo pixelar una imagen con Javascript?

¿Cómo pixelar una imagen con Javascript? 28.FEB.14

Gianfranco Lemmo
Fundador WebBizarro

Muchos de ustedes se preguntarán para que demonios me interesa pixelar una imagen en mi sitio web o mi aplicación. Pues podemos crear aplicaciones o juegos en los cuales el usuario deba adivinar la imagen oculta tras el pixelado y según pase el tiempo vamos aclarando la imagen hasta que el usuario adivine o sencillamente se termine el tiempo, seguramente a ustedes se les ocurrirá muchas otras situaciones donde se puede utilizar.

Pixelate.js es un librería basada en Javascript que utiliza JQuery o no dependiendo de cada usuario, para realizar este tratamiento a las imágenes.

El código para la utilización es el siguiente

Código usando JQuery.

$(‘img').pixelate();

Código sin JQuery.

document.querySelector(‘img').pixelate();

Ahora debemos colocar en el HTML el siguiente código.

<img src="test.jpg" width="200" height="200" data-pixelate>

El plugin ofrece 3 opciones a los usuarios:

value El porcentaje de pixelación de la imagen rango va entre 0 y 1.
reveal Muestra la imagen al pasar el mouse por encima.
revealonclick Muestra la imagen al hacer clic sobre ella.

Especificando algunas opciones en el HTML.

<img src="img.jpg" data-pixelate data-value="0.5" data-reveal=“false">

En el caso del JQuery.

$('img#myimage').pixelate({ value: 0.5, reveal: false });

A continuación pueden ver unas imágenes como debe comportarse el plugin, de igual manera les dejo el link del demo.