Notas Espacio Programación

Grayscale Javascript Optimizado

Vimos en otro artículo cómo convertir una imagen a escala de grises con javascript, utilizando el objeto canvasPixelArray. Sin embargo, la conclusión a la que habíamos llegado en aquel momento era que no era muy recomendable usar javascript para este tipo de manipulaciones debido a que el tiempo de proceso era poco aceptable, sobre todo comparándolo con el que insume Explorer, que al usar código de máquina hace lo mismo pero en mucho menos tiempo.

Pero José Antonio Pérez, a quien tuve la suerte de conocer gracias a anieto2k, me hizo ver que los tiempos de conversión pueden mejorarse notablemente corrigiendo el código que mostramos en aquella oportunidad. En concreto, lo que me señaló José Antonio es lo siguiente:



Totalmente cierto. Podemos comparar el funcionamiento de ambos códigos y veremos que la diferencia, luego de aplicar esta sugerencia, es más que notable:

Código sin optimizar:

Código optimizado:


El código del ejemplo optimizado (no aún el propuesto por José Antonio, que veremos luego y que es mucho más elegante y brinda más posibilidades) es el siguiente:


Debo confesar que en el momento en que escribí el anterior artículo había usado estas imágenes tan pequeñas para que los ejemplos demoraran un tiempo razonable, pero ahora podemos ver que el experimento puede realizarse con imágenes más grandes sin problemas:



El código propuesto por José es bastante más completo, ya que permite dividir el proceso en lotes de dimensiones variables, lo cual brinda otras posibilidades:



Nótese que cuando se invoca la función canvasToGray en el código mostrado, se usa "2" como segundo argumento. Esto hace que el lienzo se vaya pintando por partes (partes rectangulares del mismo ancho del canvas por los 2 pixeles de altura, que indica ese segundo argumento), lo que produce el siguiente resultado:



Si en lugar de parcializar el pintado en rectángulos de 2 ó n px de altura quisiéramos pintar todo de una vez (un único rectángulo), bastaría con invocar la función canvasToGray sin un segundo argumento. Con ello obtendríamos el siguiente efecto:


Aunque los tiempos de Explorer siguen siendo mucho mejores, la velocidad obtenida cuando empleamos correctamente el objeto imageData es más que aceptable.
Además, como vimos anteriormente (pero ahora de manera óptima), podemos lograr, usando este mecanismo, cosas que en Explorer sólo pueden soñarse:

Escala de rojos:

Código usado:


Y de la misma manera podemos jugar con el resto de los canales para obtener:

Escala de azules:

Escala de verdes:


También podemos jugar de diferentes maneras con los valores RGB para obtener resultados disitintos. Por ejemplo:

Cuyo resultado sería:


RollOver:
Para obtener un efecto de rollOver o sustitución de imágenes necesitamos invocar el método toDataUrl, el cual retorna una imagen instantánea del canvas codificada en base 64.

Ejemplo:

Código utilizado:



Veamos otro uso que podemos darle al objeto imageData (y de paso, a ver si identifican a este personaje, que merece nuestro máximo reconocimiento):

Código utilizado:


Conclusión:
Bien usado, el objeto imageData es una herramienta poderosa, que nos permite diferentes transformaciones sobre los canales rgba de una imagen sin quedarse atrás de otras técnicas del lado del servidor, como GD o Imagemagick, o del lado del cliente, como la clase BitmapData de Flash.

Agradecimiento:
Nuevamente quiero agradecer a José Antonio por mostrarme cómo mejorar el uso de esta herramienta.