Notas Espacio Programación

Escala de grises con javascript

Veremos cómo pasar una imagen a escala de grises con javascript, pero sólo a efectos didácticos, ya que a efectos prácticos es más rápido y conveniente usar otras técnicas que ya hemos visto, tanto del lado del cliente como del lado del servidor para lograr lo mismo.

Al igual que en otras ocasiones, usaremos canvas para conseguir el efecto en los navegadores estándar y filtros propietarios para Internet Explorer. Pero esta vez, debemos admitirlo, Explorer trabaja mucho mejor y más rápido que el resto de los navegadores y esto se debe a que, para convertir la imagen a escala de grises usando canvas, estamos obligados a recorrer cada uno de los pixeles de la imagen.

Veamos primero un ejemplo y luego explicaremos de manera sucinta cómo funciona:

Nota Importante: Los ejemplos mostrados en este artículo pueden mejorarse de manera drástica. En este otro artículo mostramos cómo.


El código utilizado es el siguiente:

Valiéndonos del método getImageData del objeto canvas podemos obtener un array representativo de los pixeles contenidos dentro de la superficie cuyas coordenadas le pasemos como agumentos. Pero este array no tiene una relación 1 a 1 con cada pixel, sino que cada pixel ocupa, dentro de este array, 4 posiciones, las cuales corresponden a los valores rgba de dicho pixel. Es decir, la superficie completa del lienzo está representada no por un array de longitud igual a ancho x alto, sino por un array de longitud igual a ancho x alto x 4.
Entonces, si queremos manipular el primer pixel de una imagen, suponiendo que ya hemos obtenido el objeto imageData y lo hemos almacenado en la variable iData, podríamos acceder a los valores rgba de ese pixel de la siguiente manera:

Una vez obtenidos esos valores, una de las manera para pasar el pixel a escala de grises es redefiniendo sus valores rgb a la media aritmética de las variables r, g y b:

Y si queremos pasar toda la imagen a escala de grises debemos hacer lo mismo con cada uno de sus pixeles, lo cual, como vemos en el ejemplo, demora un tiempo considerable, salvo en Explorer, navegador en el cual no es necesario recorrer los pixeles 1 a 1.
No obstante esta deficiencia de velocidad, canvas permite obtener efectos que en Explorer no podemos lograr con filtros.
Por ejemplo, si volviendo a nuestro ejemplo del pixel número uno, en lugar de igualar el canal rojo a la media de los valores rgb lo igualáramos al valor máximo que este admite (255):

E hiciéramos luego lo mismo con cada uno de los pixeles de la imagen, obtendríamos esto: