Close Pixelate es un script que nos permite convertir una imagen normal en pixelada gracias al uso de HTML5 y Canvas. No sólo nos convierte la imagen sino que nos permite configurar aspectos como:
- Resolución: La distancia en pixels. Requerido.
- Forma del pixelado (cuadrado, circulo y diamante). Por defecto es Cuadrado. Este campo es opcional.
- Tamaño. Por defecto será el valor de la resolución.
- Desplazamiento.
- Opacidad
El script funciona en cualquier imagen de acuerdo a las especificaciones de los navegadores para el HTML5.
Su funcionamiento es simple, basta poner en la etiqueta la imagen
[html]
[/html]
Y para que el efecto se haga realidad faltaría el siguiente código:
[javascript]
var docReady = function() {
document.getElementById(‘portrait-image’).closePixelate([
{ resolution : 24 },
{ shape : ‘circle’, resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);
};
window.addEventListener( ‘DOMContentLoaded’, docReady, false);
[/javascript]
Os dejo ejemplo de una jirafa cuya configuración empleada para mostrar este estupendo resultado ha sido la siguiente:
[javascript]
{ shape : ‘circle’, resolution : 24 },
{ shape : ‘circle’, resolution : 24, size: 9, offset: 12 }
[/javascript]
Imagen Original
Imagen con efecto Pixelar
Para obtener más información, acudir a la web del autor.
Vía: SentidoWeb
