¿Cómo obtener imágenes en blanco y negro o en escala de grises con solo HTML5?

HTML5 nos abre la puerta a innumerables posibilidad para personalizar o realizar software específico para nuestras aplicaciones webs de todo tipo como ya hemos visto en multitudes de entradas en las cuales trabajamos las distintas APIs, elementos y componentes en general de HTML, JavaScript y por supuesto CSS; entre estas características que venimos hablando se encuentra el procesamiento digital de imágenes, como hemos visto en posteriores entregas es realmente posible con HTML5 y Canvas:

• Escalado y recortando imágenes con Canvas
• Recortes de imágenes con HTML5 y jQuery
• ¿Cómo cambiar el contraste de una imagen con HTML5?
• ¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

Específicamente empleamos el API de Canvas para hacer estos ejercicios; En esta nueva entrega veremos cómo obtener imágenes en Escala de Grises o en Blanco y Negro con HTML5.

Definiendo el HTML para el procesamiento en escala de grises

Como ya explicamos en la introducción al Canvas, el tag Canvas nos permite emplear toda la API del Canvas que nos provee JavaScript, y en específico para este tutorial el de acceder a una imagen a nivel de pixeles para su procesamiento que es lo que vamos a hacer próximamente:

<canvas id="canvas">
        <p>Tu navegador no soporta Canvas.</p>
</canvas>

También necesitamos tener definido un imagen fuente con la posibilidad de descargarla que es la que vamos a referenciar en nuestro canvas para posteriormente dibuja en el mismo.

<img id="resul"/>

Esto es todo el código HTML que emplearemos en nuestro experimento para que podamos dibujar una imagen en blanco y negro sobre nuestro Canvas.

El JavaScript para referenciar el Canvas

Ahora entramos en la parte más interesante de este tutorial, vamos a definir algunas variables globales como vemos a continuación:

var canvas = document.getElementById('canvas');
canvas.getContext('2d'); 
document.getElementById('resul');
srcImg = "image.png";

Las mismas nos permitirán:

• Acceso al Canvas.
• Acceso al contexto del Canvas; nos permitirá dibujar o acceder al contenido del Canvas como tal.
• Acceso a la imagen final; en donde colocaremos la imagen en Escala de Grises o en Blanco y Negro.
• La ruta a la imagen fuente, la cual utilizaremos para obtener a partir de ella una imagen en Escala de Grises o en Blanco y Negro.

Creamos un objeto de tipo Image y le asignamos la imagen fuente; esta imagen será nuestra imagen final; es decir la imagen en Escala de Grises o en Blanco y Negro.

img = new Image();
img.src = srcImg;

Realizamos la carga de la imagen y aprovechamos para redimensionar el Canvas al tamaño de la misma; luego de eso, invocamos a la función que se encargará de llevar la imagen a en Escala de Grises o en Blanco y Negro:

// cargo la imagen fuente img.onload = function() { // reescalamos el
canvas a las dimenciones de la imagen canvas.width = img.width;
canvas.height = img.height; // dibujamos la imagen en el Canvas
ctx.drawImage(this, 0, 0); getGrayScale(); };

Pasaremos por alto la explicación en detalle de la función; si nos fijamos bien parte del cuerpo ha sido utilizado en varios artículos anteriores (¿Cómo obtener por separado el canal RGB de una imagen con HTML5?).

El punto de interés aquí es el JavaScript que nos permite tener la imagen en Escala de Grises o en Blanco y Negro.

Luego de que obtenemos la ImageData o data que compone a la imagen:

var imgData = img.data;

Iteramos la ImageData en un for; en cada iteración del for podemos acceder a nivel de pixeles a la ImageData y a si descomponer el pixel en el canal RGB (como esta formado el pixel) que es el que nos interesa operar.

Ahora podemos obtener un promedio con los valores de cada canal RGB por separado:

gris = parseInt((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3);

Sustituimos el valor original del canal RGB para obtener el efecto deseado; una imagen en la Escala de Grises o en Blanco y Negro.

imgData[i] = gris;
imgData[i + 1] = gris;
imgData[i + 2] = gris;

Tuviéramos un efecto similar si igualamos todos los canales R, G y B entre sí; es decir:

imgData[i + 1] = imgData[i];
imgData[i + 2] = imgData[i];

o

imgData[i] = imgData[i];
imgData[i + 2] = imgData[i];

o

imgData[i] = imgData[i + 2];
imgData[i + 1] = imgData[i + 2];

Pero se obtiene un mejor resultado al aplicar un promedio en entre los canales.

Resultado final para la escala de grises

Imágenes en blanco y negro o en escala de grises con solo CSS

Recordemos que podemos convertir imágenes a escala de grises o en blanco y negro empleando un simple selector en CSS como vimos en una anterior entrada sobre los filtros en CSS; específicamente el filtro:

img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
   filter: grayscale(100%);
}