HTML 5 (I) –Efectos especiales

Debido a que HTML5 hace tiempo que viene golpeando nuestras puertas, pero extrañamente poco se ha hablado en las comunidades de habla hispana (Más allá de los sitios especializados), voy a iniciar una serie de post sobre algunas características de HTML 5 que salen un poco fuera del clásico uso de tags o el dibujado sobre el objeto canvas.

Si bien en este post haremos uso de canvas, solo para que veamos una característica que puede que se nos escape.

El objeto canvas, entre otras particularidades, nos permite trabajar con las imágenes dibujadas en el mismo como si se tratase de un vector donde, en cada espacio del mismo, se almacenara información relacionada al punto de color de una zona específica del lienzo de dibujo. Teniendo esta información disponible, entonces, es posible modificar cada uno de los píxeles del dibujo y trabajar sus valores de colores y transparencias. En nuestro caso trataremos de tomar la imagen dibujada y transformarla a escala de grises.

El primer paso, para que podamos ver esto funcionando será tener dos objetos cambias y algo de código JavaScript.

<canvas width="225" height="236" id="canvas"></canvas>
<canvas width="225" height="236" id="blackCanvas"></canvas>
<br>
<input type="button" value="Click" onClick="Draw();">
...
...
<script>
        var cnv = document.getElementById("canvas");
        var cnx = cnv.getContext('2d');
        
        var cnv2 = document.getElementById("blackCanvas");
        var cnx2 = cnv2.getContext('2d');
        
        var img = new Image();
        img.src = "homer-happy.png";
        
        function Draw() {
            cnx.drawImage(img, 0, 0);
        }
</script>

image

Este código solo nos proporciona dos lienzos de dibujo. Al presionar el botón de la página, la imagen es mostrada en el primer objeto canvas.

El siguiente paso es hacer uso de la función getImageData. Con esta función obtendremos el vector con toda la información de cada uno de los pixeles del objeto canvas.

function Draw() {
    cnx.drawImage(img, 0, 0);
    cnx2.drawImage(img, 0, 0);
    
    var imageData = cnx2.getImageData(0, 0, 225, 236);
    var pixelData = imageData.data;
    
    for (var i = 0, n = pixelData.length; i < n; i += 4) {
        var grayscale = pixelData[i] * .3 + pixelData[i + 1] * .59 + pixelData[i + 2] * .11;
        
        pixelData[i] = grayscale;     // Rojo
        pixelData[i + 1] = grayscale;     // Verde
        pixelData[i + 2] = grayscale;     // Azul
    }
    
    cnx2.putImageData(imageData, 0, 0);
}

image

Al ejecutar el código, vemos que la imagen del segundo canvas es dibujada en escala de grises.

Básicamente hemos recorrido cada uno de los valores del vector y calculado su saturación para conseguir la gama de grises.

Un punto que es importante aclarar es que cada elemento del vector representa un valor del color en RGBA (Rojo, Verde, Azul y Alpha), por lo tanto, en nuestro código iremos “saltando” de a 4 elementos por ciclo, aunque no trabajemos sobre el alpha.

Por supuesto, teniendo la información de cada píxel, podemos imaginar cualquier tipo de efecto. Desde otras distorsiones de colores hasta deformaciones sobre el mismo gráfico.


3 comentarios on “HTML 5 (I) –Efectos especiales”

  1. […] el artículo anterior vimos cómo agregar algunos efectos a los gráficos dibujados en un objeto canvas mediante la […]

  2. Muy Bueno, Gracias por compartir.-

  3. […] HTML 5 (I) –Efectos especiales By Matias Iacono […]


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s