Close Pixelate – Pixelar imágenes con HTML5 y Canvas

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

Close Pixelate

Imagen con efecto Pixelar

Close Pixelate

Para obtener más información, acudir a la web del autor.

Vía: SentidoWeb