ForHosting KIT · Bilder bearbeiten & analysieren

Layout für einen Vorher-Nachher-Bildvergleich erstellen

Erstellen Sie ein präzises Layout für den Vorher-Nachher-Bildvergleich, ohne Koordinaten im Oberflächencode schätzen zu müssen.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Geben Sie die Pixelmaße beider Bilder an, wählen Sie eine Darstellung nebeneinander oder eine Überlagerung mit Schieberegler und erhalten Sie Zeichenfläche, Bildrechtecke, Beschnittbereiche und Position der senkrechten Trennlinie als strukturierte Daten. Gleiche Abmessungen werden vorausgesetzt, weil ein verlässlicher visueller Vergleich ausgerichtete Inhalte benötigt. Bei abweichenden Quellen können Sie ausdrücklich eine Anweisung anfordern, die das Nachher-Bild an die Maße des Vorher-Bildes anpasst.

Wählen Sie das passende Vergleichsformat

Eine Vorher-Nachher-Darstellung kann zwei unterschiedliche Betrachtungsbedürfnisse erfüllen. Ein Layout mit Bildern nebeneinander hält jedes Bild vollständig sichtbar. Das ist hilfreich, wenn Betrachter die gesamte Szene prüfen, weit auseinanderliegende Bereiche vergleichen oder das Ergebnis ohne Interaktion ansehen sollen. Die zurückgegebene Zeichenfläche ist doppelt so breit wie das effektive Bild: links befindet sich das Vorher-Feld, rechts das Nachher-Feld und an ihrer gemeinsamen Grenze eine senkrechte Trennlinie. Eine Überlagerung mit Schieberegler legt dagegen beide Bilder in dasselbe Koordinatensystem. Die ergänzenden Beschnittrechtecke zeigen das Vorher-Bild links und das Nachher-Bild rechts vom Trenner. Kleine Änderungen lassen sich dadurch leichter finden, weil übereinstimmende Merkmale beim Verschieben an derselben Stelle bleiben. Wählen Sie den Modus passend zu Zielgruppe und Oberfläche und verwenden Sie die Rechtecke direkt in CSS, SVG, Canvas oder einer nativen Darstellungsschicht. Sämtliche Koordinaten sind ganzzahlige Pixel; nachgelagerte Systeme müssen keine verborgene Layoutkonvention rekonstruieren.

Behandeln Sie abweichende Maße ausdrücklich

Verlässliche Vergleiche beginnen mit gleichen Abmessungen. Misst ein Bild 1200 mal 800 Pixel und das andere 1000 mal 800, verschiebt eine Überlagerung ohne festgelegte Transformation die entsprechenden Details und kann Änderungen übertreiben oder verbergen. Deshalb weist der Rechner unterschiedliche Breiten oder Höhen zurück, sofern `resize_to_match` nicht aktiviert ist. Mit dieser Option wird das Vorher-Bild zum maßgeblichen Ziel. Das Ergebnis nennt die Zielmaße für das Nachher-Bild sowie getrennte horizontale und vertikale Skalierungsfaktoren. Diese eindeutige Regel teilt dem Renderer genau mit, welche Anpassung erwartet wird, und macht ungleichmäßige Verzerrungen erkennbar. Das Werkzeug führt die Größenänderung nicht aus und wählt keinen Ausschnitt. Wenn das Seitenverhältnis erhalten bleiben muss, bereiten Sie passende Quellen vor oder beschneiden Sie sie in einer Bildverarbeitungskette, bevor Sie das Layout anfordern. Stimmen die Maße bereits überein, meldet das Anpassungsobjekt lediglich, dass keine Größenänderung nötig ist. So bleiben erfolgreiche Ergebnisse vorhersehbar strukturiert und enthalten keine optionalen Nullfelder.

Machen Sie aus den Trenndaten eine bedienbare Oberfläche

Geben Sie für eine Überlagerung eine Trennerposition zwischen null und hundert Prozent an. Der Rechner wandelt sie in das nächste Pixel der Zeichenfläche um und liefert zwei Beschnitte, deren Breiten stets die volle Bildbreite ergeben. Bei null Prozent hat der Vorher-Beschnitt keine Breite und das Nachher-Bild ist vollständig sichtbar; bei hundert Prozent gilt das Gegenteil. Der unveränderte Prozentwert wird ebenfalls zurückgegeben, etwa für Oberflächenstatus, Barrierefreiheitswerte, Analysen oder eine spätere Neuberechnung nach responsiver Größenänderung. Im Modus nebeneinander bestimmen zwei Felder mit voller Breite die Trennlinie von selbst: Sie liegt unabhängig vom eingegebenen Reglerwert in der Mitte der kombinierten Zeichenfläche. Verwenden Sie Ausrichtung und x-Koordinate, um Linie, Griff oder tastaturbedienbares Steuerelement zu positionieren. Ein produktionsreifer Regler sollte seinen Wert an Hilfstechnologien melden, Pfeiltasten unterstützen und Vorher- sowie Nachher-Seite kennzeichnen. Da diese Funktion Geometrie statt Markup liefert, kann dasselbe deterministische Ergebnis eine Webkomponente, Social-Media-Grafik, Designsystem-Vorschau oder mobile Anwendung steuern.

Anwendungsfälle

Eine Renovierung dokumentieren

Ordnen Sie ausgerichtete Raumfotos als vollständige benachbarte Felder oder als interaktiven Enthüllungsregler an.

Eine Bildbearbeitung präsentieren

Erzeugen Sie genaue Überlagerungsbeschnitte für Retusche, Restaurierung, Farbkorrektur oder Hintergrundentfernung.

Vergleichskomponenten vereinheitlichen

Geben Sie Web- und Mobil-Renderern dieselbe deterministische Zeichenfläche, Rechtecke, Anpassung und Trennlinie.

Häufige Fragen

Was kostet eine API-Anfrage?

Jede API-Anfrage kostet $0.002. Das Browserwerkzeug auf dieser Seite können Sie kostenlos verwenden.

Verändert oder lädt das Werkzeug meine Bilder hoch?

Nein. Es empfängt nur Abmessungen und gibt Koordinaten zurück; Bilddaten werden weder gelesen noch übertragen, gespeichert oder dargestellt.

Was geschieht bei unterschiedlichen Abmessungen?

Die Anfrage liefert einen Fehler wegen ungültiger Eingabe, außer resize_to_match ist wahr. Dann beschreibt das Ergebnis die Anpassung des Nachher-Bildes an das Vorher-Bild.

Wie wird das Pixel der Trennlinie berechnet?

Die Bildbreite wird mit dem gewünschten Prozentwert multipliziert, durch 100 geteilt und auf das nächste ganze Pixel gerundet.

Wirkt sich der Prozentwert auf den Modus nebeneinander aus?

Nein. Dieser Modus zeigt zwei vollständige gleich große Felder; die Trennlinie liegt daher immer bei 50 Prozent der kombinierten Zeichenfläche.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/image/compare-before-after-layout

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/image/compare-before-after-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}'

const res = await fetch("https://api.kit.forhosting.com/image/compare-before-after-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "before_width": 1200,
    "before_height": 800,
    "after_width": 1200,
    "after_height": 800
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/compare-before-after-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "before_width": 1200,
    "before_height": 800,
    "after_width": 1200,
    "after_height": 800
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/compare-before-after-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"before_width":1200,"before_height":800,"after_width":1200,"after_height":800}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/compare-before-after-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "before_width": 1200,
  "before_height": 800,
  "after_width": 1200,
  "after_height": 800
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.compare_before_after_layout",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`max_mb`	15
`max_megapixels`	12

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →