Ferramenta de Conversão em Escala de Cinza

A conversão para escala de cinza remove informações de cor e representa a imagem apenas com preto, branco e tons de cinza. Um bom resultado não é simplesmente a média de vermelho, verde e azul; muitas vezes usa uma fórmula ponderada como R×0.299 + G×0.587 + B×0.114, porque a visão humana percebe o verde com mais intensidade que o azul. Isso preserva brilho, contraste e detalhes de forma mais natural. A conversão é útil para fotografia preto e branco, digitalização de documentos, preparação de foto de identificação, testes de impressão, design vintage e análise de imagem. Em gráficos, mapas ou interfaces codificados por cor, é preciso verificar perda de significado.

A conversão de imagem para escala de cinza transforma cada pixel do espaço de cores RGB em um único valor de luminância que representa o brilho percebido. Esta ferramenta usa o Método de Luminosidade (também chamado de método de média ponderada), definido pelo padrão ITU-R BT.601 para televisão de definição padrão: Cinza = R × 0.299 + G × 0.587 + B × 0.114. Esses coeficientes refletem a sensibilidade do sistema visual humano — as células cones da retina são aproximadamente 64% sensíveis ao vermelho (cones L), 32% sensíveis ao verde (cones M) e 2% sensíveis ao azul (cones S), e os pesos aproximam a contribuição de luminância que cada canal faz ao brilho percebido. O verde domina com 58,7% porque a visão humana é mais aguda na região verde-amarela do espectro (~555 nm). Para comparação, outros métodos comuns de escala de cinza produzem resultados diferentes. O Método da Média (Cinza = (R + G + B) / 3) trata todos os canais igualmente e produz vermelhos artificialmente escuros e azuis artificialmente claros. O Método de Dessaturação no espaço de cores HSL/HSV define a saturação como zero, o que é perceptivamente mais preciso que a média, mas menos preciso que a ponderação de luminosidade. O método Luma do ITU-R BT.709 (padrão HDTV) usa coeficientes ligeiramente diferentes (0.2126, 0.7152, 0.0722) que são mais precisos para displays modernos com um ponto branco diferente. Os coeficientes BT.601 usados aqui permanecem os mais amplamente implementados e produzem resultados de aparência natural na maior variedade de imagens de entrada. O pipeline de processamento é executado inteiramente no navegador. A imagem enviada é decodificada pelo decodificador nativo de imagens do navegador (suportando JPEG, PNG, WebP, BMP e GIF) em um HTMLImageElement. A imagem é desenhada em um elemento Canvas via ctx.drawImage(), que aciona o compositor acelerado por GPU do navegador para realizar a conversão de espaço de cores e o dimensionamento. getImageData() lê de volta o buffer de pixels RGBA bruto como um Uint8ClampedArray — cada pixel ocupa 4 bytes consecutivos (R, G, B, A), então o comprimento do array é largura × altura × 4. O loop de escala de cinza itera com um stride de 4 (i += 4), calcula a soma ponderada e grava o mesmo valor de cinza nos três canais RGB enquanto preserva o canal alfa original. putImageData() grava o buffer modificado de volta no canvas. Finalmente, canvas.toBlob('image/png') codifica o resultado como um PNG sem perdas, e URL.createObjectURL() cria uma URL blob: para o link de download. Para processamento em lote, cada imagem é processada sequencialmente para evitar saturar a thread principal — o loop aguarda cada promise de conversão antes de iniciar a próxima. O canvas é reutilizado entre imagens em vez de recriado, evitando o churn de alocação de texturas GPU. Os objetos File originais são retidos junto com os Blobs de escala de cinza para que o nome do arquivo de download possa ser derivado do nome original com '_grayscale' adicionado.

• Coeficientes de luminância ITU-R BT.601: R × 0.299 + G × 0.587 + B × 0.114 — derivados da função de luminosidade fotópica do observador padrão CIE 1931, esses pesos modelam a distribuição das células cones da retina humana (L:M:S ≈ 64:32:2) e a sensibilidade máxima em 555 nm (verde-amarelo).
• Comparação de métodos: Média (R+G+B)/3 produz vermelhos escuros e azuis claros; Dessaturação (HSL S=0) é melhor mas não perceptivamente uniforme; Luma BT.709 (0.2126R + 0.7152G + 0.0722B) é mais precisa para displays HDTV, mas os pesos BT.601 usados aqui são os mais amplamente suportados entre navegadores e ferramentas de imagem.
• Pipeline de pixels do Canvas: drawImage() → compositor GPU decodifica e redimensiona → getImageData() lê RGBA Uint8ClampedArray → loop de soma ponderada por pixel (stride 4, i += 4) → putImageData() grava de volta → toBlob('image/png') codifica como PNG sem perdas → createObjectURL() para download.
• Preservação do canal alfa: o byte alfa (índice i+3) é lido mas não modificado — pixels transparentes permanecem transparentes e os valores alfa originais passam inalterados, o que importa para imagens PNG com transparência ou bordas suavizadas.
• Processamento em lote sequencial: cada imagem é processada uma de cada vez via await para evitar saturar a thread principal — o elemento canvas é reutilizado entre imagens e os objetos File são retidos para que os nomes de download possam ser derivados dos nomes originais com '_grayscale' adicionado.
• Consideração de gama: os coeficientes BT.601 são aplicados a valores sRGB codificados em gama, não a intensidades de luz linear — essa é a abordagem padrão e produz resultados visualmente corretos para exibição, mas aplicações que requerem medições físicas de luz (imagem científica, fotometria) devem primeiro linearizar os valores sRGB.
• Gerenciamento de memória: cada Blob de escala de cinza é mantido na memória via URL de objeto até que a imagem seja removida ou a página seja fechada — chamar URL.revokeObjectURL() na remoção previne vazamentos de memória, e a memória do Blob é liberada quando não há mais referências.