Crie um layout para comparar imagens antes e depois

Informe as dimensões em pixels das duas imagens, escolha uma apresentação lado a lado ou uma sobreposição com controle deslizante e receba o canvas, os retângulos, as regiões de recorte e a posição do divisor vertical como dados estruturados. Esperam-se dimensões iguais, pois uma comparação visual confiável depende de conteúdo alinhado. Quando as imagens de origem forem diferentes, você poderá solicitar explicitamente uma instrução para redimensionar a imagem posterior conforme a anterior.

Escolha o formato de comparação adequado à narrativa

Uma apresentação de antes e depois atende a duas necessidades de visualização. Um layout de comparação de imagens lado a lado mantém cada imagem inteiramente visível, o que ajuda quando o público precisa examinar a cena completa, comparar áreas distantes ou ver o resultado sem interação. O canvas retornado tem o dobro da largura efetiva da imagem, com o painel anterior à esquerda, o posterior à direita e um divisor vertical no limite comum. Já a sobreposição com controle deslizante coloca as duas imagens no mesmo sistema de coordenadas. Seus retângulos de recorte complementares exibem a imagem anterior à esquerda do divisor e a posterior à direita. Esse formato facilita a localização de pequenas mudanças, pois os elementos correspondentes continuam no mesmo ponto enquanto o divisor se move. Escolha o modo conforme o público e a interface e aplique os retângulos diretamente em CSS, SVG, Canvas ou em uma camada de renderização nativa. As coordenadas usam pixels inteiros, sem convenções ocultas para reconstruir depois.

Trate as dimensões de forma explícita

Comparações confiáveis começam com dimensões iguais. Se uma imagem tiver 1200 por 800 pixels e a outra 1000 por 800, colocá-las na mesma sobreposição sem uma transformação declarada deslocará detalhes correspondentes e poderá exagerar ou esconder mudanças. Por isso, a calculadora rejeita larguras ou alturas diferentes, a menos que `resize_to_match` esteja ativado. Com essa opção, a imagem anterior se torna o destino canônico, e o resultado inclui as dimensões de destino da imagem posterior e fatores independentes de escala horizontal e vertical. Essa política informa exatamente qual ajuste o renderizador deve aplicar e permite identificar distorções não uniformes. A ferramenta não realiza o redimensionamento nem escolhe um corte. Se a proporção precisar ser preservada, prepare fontes coincidentes ou recorte-as em um fluxo de imagem antes de pedir o layout. Quando as dimensões já forem iguais, o objeto de redimensionamento apenas indicará que nenhuma alteração é necessária, mantendo uma estrutura previsível sem campos nulos opcionais.

Transforme a saída do divisor em uma interface funcional

Na sobreposição, informe uma porcentagem de divisor entre zero e cem. A calculadora a converte para o pixel mais próximo no canvas e devolve dois recortes cujas larguras sempre somam a largura total. Em zero por cento, o recorte anterior tem largura zero e a imagem posterior aparece por completo; em cem por cento ocorre o inverso. A porcentagem original também é devolvida para o estado da interface, valores de acessibilidade, análises ou novo cálculo após um redimensionamento responsivo. No modo lado a lado, dois painéis de largura completa definem naturalmente o divisor no centro do canvas combinado, independentemente da porcentagem informada. Use a orientação e a coordenada x para posicionar uma linha, uma alça ou um controle operável por teclado. Um controle de produção deve comunicar seu valor às tecnologias assistivas, aceitar as setas e identificar os lados anterior e posterior. Como a capacidade devolve geometria, e não marcação, o mesmo resultado determinístico pode alimentar um componente web, um gráfico social, uma prévia de design system ou um aplicativo móvel.