Cree un diseño para comparar imágenes antes y después

Indique las dimensiones en píxeles de ambas imágenes, elija una presentación lateral o una superposición con deslizador y reciba como datos estructurados el lienzo, los rectángulos, las zonas de recorte y la posición del divisor vertical. Se esperan dimensiones iguales, pues una comparación visual fiable necesita contenido alineado. Si las fuentes difieren, usted puede solicitar expresamente una instrucción que ajuste la imagen posterior al tamaño de la anterior.

Elija el formato de comparación adecuado para su historia

Una presentación de antes y después puede responder a dos necesidades de visualización. Un diseño de comparación de imágenes lado a lado mantiene cada imagen completamente visible, algo útil cuando el público debe examinar toda la escena, contrastar zonas alejadas o consultar el resultado sin interactuar. El lienzo devuelto mide el doble del ancho efectivo de una imagen: el panel anterior queda a la izquierda, el posterior a la derecha y un divisor vertical ocupa el límite común. La superposición con deslizador sitúa ambas imágenes en el mismo sistema de coordenadas. Sus rectángulos de recorte complementarios muestran la imagen anterior a la izquierda del divisor y la posterior a la derecha. Así resulta más fácil localizar cambios pequeños, porque los rasgos equivalentes permanecen en el mismo lugar mientras se mueve el control. Elija el modo según el público y la interfaz, y utilice los rectángulos directamente en CSS, SVG, Canvas o una capa de representación nativa. Todas las coordenadas son píxeles enteros, sin convenciones ocultas que usted deba reconstruir después.

Gestione las dimensiones de forma explícita

Las comparaciones fiables parten de dimensiones iguales. Si una imagen mide 1200 por 800 píxeles y la otra 1000 por 800, superponerlas sin declarar una transformación desplaza los detalles correspondientes y puede exagerar u ocultar cambios. Por ello, la calculadora rechaza anchos o altos distintos salvo que se active `resize_to_match`. Con esa opción, la imagen anterior pasa a ser el destino canónico y el resultado incluye las dimensiones objetivo de la posterior, además de factores independientes de escala horizontal y vertical. Esta política explícita indica al sistema de representación qué ajuste se espera y permite detectar un estiramiento no uniforme. La herramienta no redimensiona ni decide un recorte. Si conservar la relación de aspecto es importante, prepare fuentes iguales o recórtelas en un flujo de imagen antes de solicitar el diseño. Cuando las dimensiones ya coinciden, el objeto de ajuste solo indica que no hace falta redimensionar. El resultado conserva así una estructura previsible y evita campos opcionales con valor nulo.

Convierta la salida del divisor en una interfaz funcional

Para la superposición, indique un porcentaje de divisor entre cero y cien. La calculadora lo convierte al píxel más cercano dentro del lienzo y devuelve dos recortes cuyos anchos siempre suman el ancho completo. Con cero por ciento, el recorte anterior no tiene ancho y la imagen posterior queda totalmente expuesta; con cien por ciento ocurre lo contrario. El porcentaje original también se devuelve para el estado de la interfaz, los valores de accesibilidad, las métricas o un nuevo cálculo tras un cambio adaptable. En modo lateral, dos paneles de ancho completo fijan el divisor de manera natural en el centro del lienzo combinado, independientemente del porcentaje solicitado. Utilice la orientación y la coordenada x para colocar una línea, un tirador o un control manejable por teclado. Un deslizador de producción debe comunicar su valor a las tecnologías de asistencia, responder a las flechas y rotular cada lado. Como la capacidad devuelve geometría y no marcado, un mismo resultado determinista sirve para un componente web, un gráfico social, una vista del sistema de diseño o una aplicación móvil.