Vergleichen Sie zwei Bilder nebeneinander mit Unterschiedshervorhebung und Schieberegler-Vergleich. Perfekt für Qualitätsvergleich und Vorher/Nachher-Effektvergleich.
Features
- Mehrere Vergleichsmodi: Unterstützt Seitenvergleichs- und Schieberegler-Vergleichsmodi, um verschiedenen Vergleichsanforderungen gerecht zu werden
- Unterschiedshervorhebungs-Anzeige: Unterschiedsbereiche zwischen zwei Bildern automatisch erkennen und hervorheben, Unterschiedsorte intuitiv anzeigen
- Interaktiver Schieberegler: Im Schieberegler-Vergleichsmodus Schieberegler ziehen, um verschiedene Bereiche für präzisen Detailvergleich anzuzeigen
- Präzise Pixelerkennung: Verwendet Pixel-Level-Vergleichsalgorithmus zur präzisen Erkennung von Bildunterschieden, unterstützt benutzerdefinierten Unterschieds-Schwellenwert
Usage Guide
- Schritt 1: Laden Sie zwei Bilder zum Vergleichen hoch.
- Schritt 2: Wählen Sie Vergleichsmodus (nebeneinander oder Schieberegler) und aktivieren Sie Unterschiedshervorhebung (optional).
- Schritt 3: Vergleichsergebnisse anzeigen, Schieberegler-Position oder Unterschieds-Schwellenwert für besten Vergleichseffekt anpassen.
Technical Details
Prinzip der Bildvergleichung
Die Bildvergleichung erkennt Unterschiede zwischen zwei Bildern auf Pixelebene. Seitenvergleich: zwei Bilder nebeneinander anzeigen für intuitiven Vergleich; Schieberegler-Vergleich: Schieberegler verwenden, um Anzeigebereich zu steuern, links/rechts ziehen, um verschiedene Teile anzuzeigen; Unterschiedshervorhebung: Pixeldifferenzen zwischen zwei Bildern berechnen, Unterschiedsbereiche rot hervorheben. Verwendet getImageData() der Canvas-API, um Pixeldaten zu erhalten, RGB-Werte Pixel für Pixel vergleichen, Differenz berechnen und visualisieren.
Pixel-Unterschiedserkennung
Implementierung: zwei Bilder auf Canvas laden → getImageData() zum Abrufen von Pixeldaten → RGB-Werte Pixel für Pixel vergleichen → Differenz berechnen (|R1-R2|+|G1-G2|+|B1-B2|) → als Unterschied markieren, wenn Schwellenwert überschritten → Differenzbild generieren (rote Hervorhebung für Unterschiedsbereiche). Unterstützt: benutzerdefinierten Unterschieds-Schwellenwert, Echtzeit-Vorschau, Schieberegler-Interaktion, Seitenvergleich-Anzeige usw.
Kreative und praktische Szenarien
Die Bildvergleichung wird verwendet für: Design-Überprüfung (Design-Mockup und Implementierung vergleichen), Qualitätsprüfung (Original- und komprimierte Bilder vergleichen), Vorher/Nachher-Vergleich (Effekte vor und nach Verarbeitung vergleichen), Versionsvergleich (verschiedene Versionen von Bildern vergleichen), Testverifizierung (erwartete und tatsächliche Ergebnisse vergleichen), Lernforschung (Effekte verschiedener Parameter vergleichen). Hilft beim schnellen Erkennen von Bildunterschieden und Durchführen von Qualitätsbewertungen, ein praktisches Werkzeug für die Bildverarbeitung.
Frequently Asked Questions
- Welche Vergleichsmodi sind verfügbar?
- Das Werkzeug bietet zwei Vergleichsmodi: Nebeneinander (zwei Bilder nebeneinander für Gesamtvergleich anzeigen) und Schieberegler (Schieberegler verwenden, um Anzeigebereich zu steuern, ziehen, um verschiedene Teile anzuzeigen). Der Schieberegler-Modus eignet sich für Szenarien, die präzisen Detailvergleich erfordern.
- Wie funktioniert die Unterschiedshervorhebung?
- Die Unterschiedshervorhebung vergleicht zwei Bilder auf Pixelebene und berechnet den RGB-Unterschiedswert für jedes Pixel. Wenn die Differenz den festgelegten Schwellenwert überschreitet, wird dieser Bereich rot hervorgehoben. Sie können den Unterschieds-Schwellenwert anpassen, um die Hervorhebungsempfindlichkeit zu steuern.
- Kann ich Bilder unterschiedlicher Größe vergleichen?
- Ja, das Werkzeug behandelt automatisch Bilder unterschiedlicher Größe. Für die Unterschiedserkennung verwendet es die Größe des größeren Bildes als Referenz, kleinere Bilder werden proportional angezeigt.
- Wie verwende ich den Schieberegler-Vergleich?
- Im Schieberegler-Vergleichsmodus ziehen Sie den mittleren Schieberegler, um den Anzeigebereich zu steuern. Die linke Seite des Schiebereglers zeigt das erste Bild, die rechte Seite zeigt das zweite Bild. Ziehen Sie den Schieberegler, um Details verschiedener Bereiche präzise zu vergleichen.
- Wie stelle ich den Unterschieds-Schwellenwert ein?
- Der Unterschieds-Schwellenwert steuert die Empfindlichkeit der Unterschiedserkennung. Niedrigerer Schwellenwert erkennt subtile Unterschiede leichter; höherer Schwellenwert zeigt nur offensichtliche Unterschiede. Es wird empfohlen, basierend auf tatsächlichen Bedürfnissen anzupassen, allgemein zwischen 20-50 eingestellt.
Related Documentation
- MDN - Canvas API - HTML5 Canvas API für Bildmanipulation und -verarbeitung
- MDN - ImageData API - Canvas ImageData Interface-Dokumentation
- Web.dev - Bildoptimierung - Best Practices zur Optimierung von Bildern im Web