Έλεγχος διαφορών εικόνας
Ανεβάστε δύο εικόνες και δείτε μια οπτική διαφορά με ακρίβεια εικονοστοιχείου μεταξύ τους, με αντιληπτική σύγκριση YIQ και επισήμανση anti-aliasing-aware — 100% τοπικά στο πρόγραμμα περιήγησής σας.
Αποτέλεσμα
Στείλατε ένα tweak CSS και θέλετε να μάθετε τι ακριβώς μετακινήθηκε; Συγκρίνετε δύο στιγμιότυπα οθόνης για έλεγχο οπτικής παλινδρόμησης QA; Αναρωτιέστε τι άλλαξε πραγματικά ανάμεσα σε δύο εξαγόμενες εκδόσεις της ίδιας φωτογραφίας; Η κύλιση μεταξύ δύο εικόνων και το στρίψιμο για διαφορές είναι αργή και αναξιόπιστη — αυτό το εργαλείο επικαλύπτει τα δύο και σας δείχνει κάθε αλλαγμένο pixel σε μία εικόνα.
Η σύγκριση είναι πραγματικά μαθηματικά που διαφοροποιούν τα εικονοστοιχεία, η ίδια οικογένεια αλγορίθμων που χρησιμοποιείται από εργαλεία όπως το pixelmatch: κάθε pixel και των δύο εικόνων μετατρέπεται από RGB σε χρωματικό χώρο YIQ (Y = luma, I και Q = οι άξονες χρωματισμού NTSC) και υπολογίζεται η Ευκλείδεια απόσταση μεταξύ των δύο σημείων YIQ. Αυτή η απόσταση συγκρίνεται με ένα όριο που ορίζεται από το ρυθμιστικό ευαισθησίας — αυξήστε την ευαισθησία για να πιάσετε ανεπαίσθητες χρωματικές εναλλαγές, χαμηλώστε την για να αγνοήσετε τον θόρυβο συμπίεσης και φροντίστε μόνο για προφανείς αλλαγές.
Μια αφελής σύγκριση ανά εικονοστοιχείο θα φώτιζε κάθε άκρο κατά του ψευδώνυμου ως "διαφορετικό" ακόμη και όταν δεν άλλαξε τίποτα ουσιαστικό, επειδή η εξομάλυνση μετατοπίζει μια χούφτα εικονοστοιχεία περιγράμματος κατά μερικές αποχρώσεις. Αυτό το εργαλείο εκτελεί ένα πραγματικό ευρετικό anti-aliasing και στις δύο εικόνες: ένα εικονοστοιχείο αντιμετωπίζεται ως πραγματική διαφορά μόνο εάν ΔΕΝ βρίσκεται μέσα σε μια κλίση εξομάλυνσης — συγκεκριμένα, εάν η δική του γειτονιά 3x3 σε καμία από την εικόνα πηγής δεν περιέχει ήδη ένα πιο ανοιχτό και ένα πιο σκούρο pixel από το ίδιο, το οποίο είναι το δακτυλικό αποτύπωμα ενός άκρου λειασμένου με AA παρά πραγματικού περιεχομένου.
Μεταφορτώστε την εικόνα Α και την εικόνα Β, προσαρμόστε την ευαισθησία εάν χρειάζεται και πατήστε Εκτέλεση. Λαμβάνετε ένα ακριβές ποσοστό εικονοστοιχείων που διαφέρουν συν μια εικόνα διαφοράς με κάθε πραγματική αλλαγή που επισημαίνεται με φωτεινό ματζέντα σε μια θαμπωμένη έκδοση του αρχικού — κατεβάστε το και επισυνάψτε το κατευθείαν στην αναφορά σφάλματος ή στις σημειώσεις QA. Και οι δύο εικόνες πρέπει να έχουν τις ίδιες διαστάσεις. Εάν δεν το κάνουν, το εργαλείο σας λέει ξεκάθαρα αντί να περικόψει ή να τεντώσει σιωπηλά ένα από αυτά. Τίποτα δεν φεύγει από το πρόγραμμα περιήγησής σας σε κανένα σημείο.
Τα αρχεία και οι είσοδοι σας δεν φεύγουν ποτέ από αυτήν τη συσκευή. Η επεξεργασία εκτελείται εντελώς εκτός σύνδεσης. 100% ασφαλής.
Αποδεκτές Μορφές & Κανόνες
- Σύγκριση δέλτα YIQ ανά εικονοστοιχείο (Y/I/Q μετατροπή από RGB μέσω του τυπικού τύπου NTSC) έναντι ορίου ελεγχόμενου από ρυθμιστικό.
- Η εικόνα Diff επισημαίνει κάθε εικονοστοιχείο με σημαία σε ματζέντα πάνω από ένα αντίγραφο της πρώτης εικόνας σε σκοτεινή κλίμακα του γκρι, συν ένα ακριβές στατιστικό "X% των εικονοστοιχείων διαφέρουν".
- Καθαρίστε το σφάλμα εάν οι δύο εικόνες έχουν διαφορετικές διαστάσεις, αντί να περικόψετε ή να τεντώσετε σιωπηλά μία από αυτές.
Βασικά Οφέλη
Περιπτώσεις χρήσης
- • Αυτή η ανάπτυξη του CSS ή της διάταξης άλλαξε κατά λάθος κάτι — τι ακριβώς μετακινήθηκε μεταξύ του στιγμιότυπου οθόνης πριν και μετά;
- • Πώς μπορώ να εκτελέσω έναν γρήγορο έλεγχο οπτικής παλινδρόμησης σε ένα στιγμιότυπο οθόνης διεπαφής χρήστη χωρίς να εγκαταστήσω το Percy ή ένα εργαλείο επί πληρωμή QA;
- • Είναι όντως αυτή η φωτογραφία χωρίς επεξεργασία ή κάποιος έκανε ρετουσάρισμα σε μια συγκεκριμένη περιοχή — μπορώ να το αποδείξω pixel-pixel;
Αξιολογήστε αυτό το εργαλείο
