Tratamiento de imágenes con canvas (HTML5)

HTML5 es la quinta versión del lenguaje de etiquetado de la World Wide Web. En esta versión se incluyen novedades en cuanto al tipo de etiquetas que posee, como <audio> o <video> .

Una de las novedades es la etiquetas <canvas> con la que podremos renderizar formas 2D e imágenes de mapas de bits.

Dicho elemento Canvas manejado desde Javascript nos abre multitud de posibilidades a la hora de representar imágenes en una aplicación web.

Por ejemplo podemos probar su potencia y además aprender tres formas diferentes de pasar una imagen en color a escala de grises:



¿Qué acaba de suceder?

Dada una imagen hemos creado un “lienzo” (etiqueta <canvas>…</canvas>) en donde hemos ido volcando los diferentes resultados de tratar la imagen píxel a píxel.

Hemos utilizado tres formas diferentes para representar una imagen en escala de grises. El primer botón (Luminosity) corresponde a tratar la matriz RGB de la imagen en color con la siguiente fórmula:

 valorBN = 0.21 R + 0.71 G + 0.07 B

El segundo botón (Ligthness) corresponde a:

valorBN = (max(R, G, B) + min(R, G, B)) / 2

Y el tercer método (Average) no es más que la media aritmética del RGB de cada píxel (corresponde al tercer botón).

Por último he realizado un threshold (función umbral). Un método muy útil en los procedimientos de visión artificial.

 

Deja un comentario

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