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

PLAIN TEXT
HTML:
  1. <img id="portrait-image" src="img/portrait.jpg" alt="" />

Y para que el efecto se haga realidad faltaría el siguiente código:

PLAIN TEXT
JAVASCRIPT:
  1. var docReady = function() {
  2. document.getElementById('portrait-image').closePixelate([
  3. { resolution : 24 },
  4. { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  5. ]);
  6. };
  7.  
  8. window.addEventListener( 'DOMContentLoaded', docReady, false);

Os dejo ejemplo de una jirafa cuya configuración empleada para mostrar este estupendo resultado ha sido la siguiente:

PLAIN TEXT
JAVASCRIPT:
  1. { shape : 'circle', resolution : 24 },
  2. { shape : 'circle', resolution : 24, size: 9, offset: 12 }

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

Posts Relacionados