Créez une comparaison d’images avant et après

Indiquez les dimensions en pixels des deux images, choisissez une présentation côte à côte ou une superposition avec curseur, puis obtenez le canevas, les rectangles, les zones de découpe et la position du séparateur vertical sous forme de données structurées. Des dimensions identiques sont attendues, car une comparaison visuelle fiable exige un contenu aligné. Si vos sources diffèrent, vous pouvez demander explicitement une instruction qui redimensionne l’image finale selon l’image initiale.

Choisissez le format de comparaison adapté à votre récit

Une présentation avant-après répond à deux besoins de consultation distincts. Une mise en page comparative côte à côte conserve chaque image entièrement visible, ce qui convient lorsque le public doit parcourir toute la scène, confronter des zones éloignées ou voir le résultat sans interaction. Le canevas renvoyé mesure deux fois la largeur effective d’une image : le panneau initial se trouve à gauche, le panneau final à droite et un séparateur vertical occupe leur limite commune. La superposition avec curseur place plutôt les deux images dans le même repère. Ses rectangles de découpe complémentaires montrent l’image initiale à gauche du séparateur et l’image finale à droite. Les petites modifications deviennent ainsi plus faciles à repérer, car les éléments correspondants restent au même endroit pendant le déplacement du séparateur. Sélectionnez le mode selon le public et l’interface, puis utilisez directement les rectangles dans CSS, SVG, Canvas ou une couche de rendu native. Les coordonnées sont des pixels entiers ; aucune convention cachée ne doit être reconstituée en aval.

Traitez explicitement les dimensions différentes

Une comparaison fiable commence par des dimensions identiques. Si une image mesure 1200 par 800 pixels et l’autre 1000 par 800, les superposer sans transformation déclarée décale les détails correspondants et peut amplifier ou masquer une modification. La calculatrice refuse donc une largeur ou une hauteur différente, sauf si `resize_to_match` est activé. Avec cette option, l’image initiale devient la cible canonique et le résultat fournit les dimensions cibles de l’image finale ainsi que des facteurs d’échelle horizontale et verticale indépendants. Cette règle indique précisément au moteur de rendu la correction attendue et permet de détecter un étirement non uniforme. L’outil n’effectue pas le redimensionnement et ne choisit aucun recadrage. Si le respect des proportions est essentiel, préparez des sources correspondantes ou recadrez-les dans une chaîne de traitement avant de demander la mise en page. Lorsque les dimensions concordent déjà, l’objet de redimensionnement signale simplement qu’aucune adaptation n’est nécessaire. Les résultats gardent ainsi une structure prévisible, sans champs facultatifs nuls.

Transformez les données du séparateur en interface utilisable

Pour une superposition, indiquez un pourcentage de séparateur compris entre zéro et cent. La calculatrice le convertit au pixel le plus proche dans le canevas et renvoie deux découpes dont les largeurs totalisent toujours la largeur complète. À zéro pour cent, la découpe initiale est nulle et l’image finale apparaît entièrement ; à cent pour cent, la situation s’inverse. Le pourcentage inchangé est également renvoyé pour l’état de l’interface, les valeurs d’accessibilité, l’analyse ou un nouveau calcul après un redimensionnement adaptatif. En mode côte à côte, deux panneaux pleine largeur placent naturellement le séparateur au milieu du canevas combiné, quel que soit le pourcentage fourni. Utilisez l’orientation et la coordonnée x pour positionner une ligne, une poignée ou une commande utilisable au clavier. Un curseur prêt pour la production doit annoncer sa valeur aux technologies d’assistance, accepter les flèches et identifier chaque côté. Comme cette capacité renvoie de la géométrie et non du balisage, le même résultat déterministe peut alimenter un composant web, un visuel social, un aperçu de système de conception ou une application mobile.