Compare duas imagens lado a lado com destaque de diferenças e comparação por controle deslizante. Perfeito para comparação de qualidade e comparação de efeitos antes/depois.
Features
- Múltiplos Modos de Comparação: Suporta modos de comparação lado a lado e por controle deslizante para atender diferentes necessidades de comparação
- Exibição de Destaque de Diferenças: Detectar e destacar automaticamente áreas de diferença entre duas imagens, exibir intuitivamente localizações de diferenças
- Controle Deslizante Interativo: No modo de comparação por controle deslizante, arraste o controle para ver diferentes áreas para comparação precisa de detalhes
- Detecção Precisa de Pixels: Usa algoritmo de comparação em nível de pixel para detectar precisamente diferenças de imagens, suporta limiar de diferença personalizado
Usage Guide
- Passo 1: Carregue duas imagens para comparar.
- Passo 2: Selecione modo de comparação (lado a lado ou controle deslizante) e habilite destaque de diferenças (opcional).
- Passo 3: Visualize resultados de comparação, ajuste posição do controle ou limiar de diferença para melhor efeito de comparação.
Technical Details
Princípio de Comparação de Imagens
A comparação de imagens detecta diferenças entre duas imagens em nível de pixel. Comparação lado a lado: exibir duas imagens lado a lado para comparação intuitiva; comparação por controle deslizante: usar controle para controlar área de exibição, arrastar esquerda/direita para ver diferentes partes; destaque de diferenças: calcular diferenças de pixel entre duas imagens, destacar áreas de diferença em vermelho. Usa getImageData() da API Canvas para obter dados de pixel, comparar valores RGB pixel por pixel, calcular diferença e visualizar.
Detecção de Diferença de Pixels
Implementação: carregar duas imagens no Canvas → getImageData() para obter dados de pixel → comparar valores RGB pixel por pixel → calcular diferença (|R1-R2|+|G1-G2|+|B1-B2|) → marcar como diferença se exceder limiar → gerar imagem de diferença (destaque vermelho para áreas de diferença). Suporta: limiar de diferença personalizado, visualização em tempo real, interação com controle, exibição lado a lado, etc.
Cenários Criativos e Práticos
A comparação de imagens é usada para: revisão de design (comparar mockup de design e implementação), verificação de qualidade (comparar imagens originais e comprimidas), comparação antes/depois (comparar efeitos antes e depois do processamento), comparação de versões (comparar diferentes versões de imagens), verificação de testes (comparar resultados esperados e reais), pesquisa de aprendizado (comparar efeitos de diferentes parâmetros). Ajuda a descobrir rapidamente diferenças de imagens e realizar avaliação de qualidade, uma ferramenta prática para processamento de imagens.
Frequently Asked Questions
- Quais modos de comparação estão disponíveis?
- A ferramenta fornece dois modos de comparação: lado a lado (exibir duas imagens lado a lado para comparação geral) e controle deslizante (usar controle para controlar área de exibição, arrastar para ver diferentes partes). Modo controle deslizante é adequado para cenários que requerem comparação precisa de detalhes.
- Como funciona o destaque de diferenças?
- O destaque de diferenças compara duas imagens em nível de pixel, calculando valor de diferença RGB para cada pixel. Quando a diferença excede o limiar estabelecido, essa área é destacada em vermelho. Você pode ajustar o limiar de diferença para controlar sensibilidade do destaque.
- Posso comparar imagens de tamanhos diferentes?
- Sim, a ferramenta trata automaticamente imagens de tamanhos diferentes. Para detecção de diferenças, usa o tamanho da imagem maior como referência, imagens menores são exibidas proporcionalmente.
- Como usar a comparação por controle deslizante?
- No modo de comparação por controle deslizante, arraste o controle central para controlar área de exibição. Lado esquerdo do controle mostra primeira imagem, lado direito mostra segunda imagem. Arraste o controle para comparar precisamente detalhes de diferentes áreas.
- Como definir o limiar de diferença?
- O limiar de diferença controla sensibilidade da detecção de diferenças. Limiar mais baixo detecta diferenças sutis mais facilmente; limiar mais alto mostra apenas diferenças óbvias. Recomendado ajustar com base em necessidades reais, geralmente definido entre 20-50.
Related Documentation
- MDN - Canvas API - API Canvas HTML5 para manipulação e processamento de imagens
- MDN - ImageData API - Documentação da interface Canvas ImageData
- Web.dev - Otimização de Imagens - Melhores práticas para otimizar imagens na web