Pixelar imágenes con HTML5

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Close Pixelate es un script que hace uso de HTML5 y canvas para convertir una imagen en su misma versión con efecto pixelado. Se puede configurar para obtener diferentes resultados personalizanndo las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha.

Para utilizarlo basta con añadir la siguiente llamada en cada imagen en la que queramos realizar el efecto pixelado.

<img id="portrait-image" src="img/portrait.jpg" />

Las configuraciones adicionales de: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha se realizan desde el siguiente código.

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);

Un comentario

  1. Alejandro dijo:
    14 junio, 2013
    Responder

    No funciona!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.