Herramienta de Conversión a Escala de Grises

La conversión a escala de grises elimina la información de color y representa una imagen solo con negro, blanco y tonos grises. Un buen resultado no es simplemente promediar rojo, verde y azul; suele usarse una fórmula ponderada como R×0.299 + G×0.587 + B×0.114 porque la visión humana percibe el verde con más fuerza que el azul. Así se conservan mejor brillo, contraste y detalle. La escala de grises sirve para fotografía en blanco y negro, escaneos de documentos, preparación de fotos de identificación, pruebas de impresión, diseño vintage y análisis de imagen. En gráficos, mapas o capturas con color informativo, conviene revisar si se pierde significado.

La conversión de imagen a escala de grises transforma cada píxel del espacio de color RGB a un único valor de luminancia que representa el brillo percibido. Esta herramienta utiliza el Método de Luminosidad (también llamado método de promedio ponderado), definido por el estándar ITU-R BT.601 para televisión de definición estándar: Gray = R × 0.299 + G × 0.587 + B × 0.114. Estos coeficientes reflejan la sensibilidad del sistema visual humano — las células cónicas de la retina son aproximadamente 64% sensibles al rojo (conos L), 32% sensibles al verde (conos M) y 2% sensibles al azul (conos S), y los pesos aproximan la contribución de luminancia que cada canal hace al brillo percibido. El verde domina con un 58.7% porque la visión humana es más aguda en la región verde-amarilla del espectro (~555 nm). Para comparar, otros métodos comunes de escala de grises producen resultados diferentes. El Método de Promedio (Gray = (R + G + B) / 3) trata todos los canales por igual y produce rojos antinaturalmente oscuros y azules antinaturalmente brillantes. El Método de Desaturación en el espacio de color HSL/HSV establece la saturación a cero, lo cual es perceptivamente más preciso que el promedio pero menos preciso que la ponderación de luminosidad. El método Luma de ITU-R BT.709 (estándar HDTV) usa coeficientes ligeramente diferentes (0.2126, 0.7152, 0.0722) que son más precisos para pantallas modernas con un punto blanco diferente. Los coeficientes BT.601 utilizados aquí siguen siendo los más ampliamente implementados y producen resultados de aspecto natural en la mayor variedad de imágenes de entrada. El pipeline de procesamiento se ejecuta completamente en el navegador. La imagen subida se decodifica mediante el decodificador nativo del navegador (soportando JPEG, PNG, WebP, BMP y GIF) en un HTMLImageElement. La imagen se dibuja en un elemento Canvas mediante ctx.drawImage(), lo que activa el compositor acelerado por GPU del navegador para realizar la conversión de espacio de color y el escalado. getImageData() lee de vuelta el búfer de píxeles RGBA crudo como un Uint8ClampedArray — cada píxel ocupa 4 bytes consecutivos (R, G, B, A), por lo que la longitud del array es ancho × alto × 4. El bucle de escala de grises itera con un stride de 4 (i += 4), calcula la suma ponderada y escribe el mismo valor gris en los tres canales RGB mientras preserva el canal alfa original. putImageData() escribe el búfer modificado de vuelta al canvas. Finalmente, canvas.toBlob('image/png') codifica el resultado como un PNG sin pérdida, y URL.createObjectURL() crea una URL blob: para el enlace de descarga. Para el procesamiento por lotes, cada imagen se procesa secuencialmente para evitar saturar el hilo principal — el bucle espera cada promesa de conversión antes de iniciar la siguiente. El canvas se reutiliza entre imágenes en lugar de recrearse, evitando la asignación y liberación de texturas GPU. Los objetos File originales se retienen junto a los Blobs de escala de grises para que el nombre de archivo de descarga pueda derivarse del nombre original con '_grayscale' añadido.

• Coeficientes de luminancia ITU-R BT.601: R × 0.299 + G × 0.587 + B × 0.114 — derivados de la función de luminosidad fotópica del observador estándar CIE 1931, estos pesos modelan la distribución de células cónicas de la retina humana (L:M:S ≈ 64:32:2) y la sensibilidad máxima a 555 nm (verde-amarillo).
• Comparación de métodos: Promedio (R+G+B)/3 produce rojos oscuros y azules brillantes; Desaturación (HSL S=0) es mejor pero no perceptivamente uniforme; Luma BT.709 (0.2126R + 0.7152G + 0.0722B) es más preciso para pantallas HDTV pero los pesos BT.601 usados aquí son los más ampliamente soportados en navegadores y herramientas de imagen.
• Pipeline de píxeles del canvas: drawImage() → compositor GPU decodifica y escala → getImageData() lee RGBA Uint8ClampedArray → bucle de suma ponderada por píxel (stride 4, i += 4) → putImageData() escribe de vuelta → toBlob('image/png') codifica como PNG sin pérdida → createObjectURL() para descarga.
• Preservación del canal alfa: el byte alfa (índice i+3) se lee pero no se modifica — los píxeles transparentes permanecen transparentes, y los valores alfa originales pasan sin cambios, lo cual importa para imágenes PNG con transparencia o bordes con antialiasing.
• Procesamiento secuencial por lotes: cada imagen se procesa una a la vez mediante await para evitar saturar el hilo principal — el elemento canvas se reutiliza entre imágenes, y los objetos File se retienen para que los nombres de archivo de descarga puedan derivarse de los nombres originales con '_grayscale' añadido.
• Consideración de gamma: los coeficientes BT.601 se aplican a valores sRGB codificados en gamma, no a intensidades de luz lineal — este es el enfoque estándar y produce resultados visualmente correctos para pantalla, pero aplicaciones que requieran mediciones de luz física (imagen científica, fotometría) deberían primero linearizar los valores sRGB.
• Gestión de memoria: cada Blob de escala de grises se mantiene en memoria mediante una URL de objeto hasta que la imagen se elimina o la página se cierra — llamar a URL.revokeObjectURL() al eliminar previene fugas de memoria, y la memoria del Blob se libera cuando no quedan referencias.