Source: https://programarfacil.com/podcast/44-tratamiento-de-imagenes-con-javascript/
Timestamp: 2019-07-21 19:23:24+00:00

Document:
44. Tratamiento de imágenes con JavaScript
Antes de seguir viendo más en profundidad de que está compuesta una imagen hay que dejar claro ciertos conceptos. Ya hablamos en su día de los megapíxeles y la gran mentira que hay detrás de ellos así que, no hablaremos de este concepto pero si que os voy a hablar de que es la resolución de una imagen, dimensiones de píxel y la profundidad de píxel.
La resolución de una imagen nos da información de la cantidad de píxeles que la describen. Se suele medir en píxeles por pulgada (ppi del inglés pixels per inch) y nos indica la cantidad de píxeles que caben en una pulgada. La pulgada es una medida inglesa que equivale a 2,54 cm, para que todos nos entendamos, serían los píxeles que caben en 6,45 cm². Este concepto es muy importante ya que determina la calidad y el tamaño que va a ocupar una imagen. La resolución normal que se utiliza en Internet es 72 ppi, esto nos indica que en 2,54 cm² hay 72 x 72 píxeles, osea 5.184. Si aumentamos la resolución tendremos más píxeles por pulgada y por lo tanto tendremos más información, más calidad y ocupará más nuestra imagen.
Las dimensiones de píxel nos da información del tamaño de la imagen. Este tamaño viene expresado en número de píxeles horizontales y número de píxeles verticales. Imaginaros que queremos escanear una imagen de 254 cm x 254 cm (equivale a 100 pulgadas x 100 pulgadas), a una resolución de 150 ppi. Queremos saber en términos de dimensiones de píxel cual va a ser su tamaño, lo único que tenemos que hacer es multiplicar el ancho y el alto de la imagen impresa por la resolución. Nos daría una imagen de 15.000 x 15.000 px.
La profundidad de píxel o también llamada profundidad de color nos proporciona la cantidad de información de color que puede almacenar cada píxel en bits. Esto quiere decir que si tenemos una profundidad de píxel de 1, podremos almacenar 2 elevado a 1 valores posibles o sea 2 valores. Estas imágenes se llaman binarias y cada píxel puede ser blanco 0 o negro 1. A continuación os muestro una tabla con la profundidad de color donde podemos ver diferentes tipos de archivos.
Profundidades de píxel
Profundidad (bits)
22 = 2 colores
28 = 256 colores
216 = 65.536 colores
224 = 16.777.216 colores
BMP, TGA, TIF, JPG
Una vez tenemos claro los conceptos de resolución de imagen, dimensión de píxel y profundidad de píxel podemos pasar a describir el color. Como ya me imagino que estáis intuyendo, el color esta estrechamente ligado a la profundidad de píxel.
No es más que un haz de luz con una longitud de onda que se refleja en un objeto y nuestro ojo es capaz de interpretar un color. El color que percibimos a través del sistema visual se puede expresar numéricamente mediante fórmulas matemáticas. De este hecho surgen los modelos de color. Los más importantes son RGB (Red, Green, Blue), CMYK (Cyan, Magenta, Yellow, Key), HSV (Hue, Saturation, Value) y CIELAB (CIE 1976 L*a*b*).
Nos centraremos en el modelo de color RGB. Este modelo de color es el utilizado por todos los sistemas audiovisuales y se conoce también como sistema aditivo ya que con la mezcla por adición de los tres colores primarios podemos representar los demás colores.
Haciendo un resumen de lo que hemos visto hasta ahora, tendremos una imagen que está formada por celdas de una matriz y dentro de cada celda tendremos 3 números que corresponden con los colores R (Rojo), G (Verde) y B (Azul).
210 34 43
210 34 45
2 67 32
120 88 90
67 89 187
45 167 32
56 210 92
127 120 32
32 54 189
200 2 121
189 237 32
156 90 233
Ya tenemos la información suficiente para poder trabajar con imágenes en JavaScript. Para este efecto tenemos el método que nos ofrece el elemento Canvas getImageData(). Con este método seremos capaces de extraer la información a nivel de píxel de una imagen y recorrerlo a través de un bucle. Este método nos devolverá un array de una dimensión del siguiente estilo:
[120][2][4][255][45][67][89][255][210][214][17][255]
Esto son los píxeles de nuestra imagen pero, entendamos un poco como podemos agruparlos. Este método nos devuelve por cada píxel cuatro componentes RGBA, los tres colores primarios R (rojo), G (verde), B(azul) y una nueva componente A (Alpha), que nos permite cambiar la transparencia de dicho píxel. Así que en el ejemplo anterior tenemos tres píxeles que serían los siguientes:
[120][2][4][255] -> Píxel 1
[45][67][89][255] -> Píxel 2
[210][214][17][255] -> Píxel 3
El rango de valores que puede tener cada componente son de 0 a 255 por lo tanto la profundidad de píxel es de 8.
Ya podemos comenzar a tratar una imagen y lo más básico o fácil sería convertir una imagen a escala de grises. Esto consiste en obtener el tono de gris de cada píxel. Para obtenerlo hay que hacer la media de las componentes de color. Esta media debe ser algo especial ya que debemos obtener la luminancia en escala de grises para que coincida con la luminancia del color. El ser humano no es igual de sensible a todos los colores, es más sensible al color verde que el color azul así que esta media debe ser ponderada a través de una formula matemática más que probada. Si no hiciéramos esta ponderación, la media sería sumar todas las componentes y dividir por 3 (R+G+B)/3 = color gris, que sería lo mismo que multiplicar a todas las componentes por 0,33. En cambio vamos a realizar la ponderación de la siguiente manera, al ser más sensible el ojo humano al verde lo vamos a multiplicar por 0.52, al rojo por 0.33 y al azul por 0.15.
R*0.33+G*0.52+B*0.15 = color gris
Aplicando esta ponderación al ejemplo anterior tendríamos el siguiente resultado
[120][2][4][255] => 120*0.33+2*0.52+4*0.15 = 41 -> Píxel 1
[45][67][89][255] => 45*0.33+67*0.52+89*0.15 = 63 -> Píxel 2
[210][214][17][255] => 210*0.33+214*0.52+17*0.15 = 183 -> Píxel 3
Transformar a escala de grises es solo un ejemplo de todo lo que podemos hacer con el tratamiento de imágenes, suavizar una imagen, realzar, obtener bordes, filtrar por colores, incrustar marca de agua, etc…, todo esto lo iremos viendo con más artículos en nuestro blog y con fragmentos de código que iremos incorporando.
Bueno pues hasta aquí esta pequeña introducción al tratamiento digital de imágenes donde hemos visto los conceptos básicos para poder trabajar a nivel de programación con una imagen digital. Aquí os dejo un fragmento de código donde podemos ver cómo convertir una imagen a escala de grises con JavaScript.
A continuación los enlaces de los que hemos hablado en este podcast.
Inscribirse como simpatizante en la Asociación Pocast
CamanJS es una librería escrita en JavaScript que nos permite manipular imágenes aplicando filtros y efectos de una forma rápida. Combina una interfaz fácil de usar con técnicas de edición de imágenes avanzadas y muy eficientes. Aunque incorpora una amplia gama de funciones de edición de imágenes, se puede extender con nuevos filtros y plugins. Es una librería totalmente independiente y funciona tanto en el navegador como en servidor, con NodeJS.
Noticias, proyectos Maker y Raspberry Pi 4. Edición verano
El verano ha entrado con fuerza en nuestras casas. Ya ha llegado la primera ola de calor y los aires acondicionados a tope. Antes de empezar las … [+ info...]
El HX711 es un amplificador de célula de carga que te permite medir la fuerza (peso) con un Arduino, un ESP8266 o cualquier otra placa … [+ info...]

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución