Καταγραφή χρώματος ενός pixel εικόνας

Πίνακας ελέγχου
Τεκμηρίωση
API

ανακτά το ακριβές χρώμα ενός pixel της εικόνας σας (RGB, HSL, δεκαεξαδικό) κάνοντας κλικ στο σημείο της επιλογής σας

Τι είναι ο επιλογέας χρώματος εικόνας;

Ένας επιλογέας χρώματος (στα γαλλικά πιπέτα χρώματος ή σύλληψη χρώματος) είναι ένα εργαλείο που επαναφέρει την ακριβή τιμή ενός επιλεγμένου pixel σε μια εικόνα. Ανεβάζεις μια φωτογραφία, εσύ κάντε κλικ στο σημείο που σας ενδιαφέρει και το εργαλείο επιστρέφει το ακριβές χρώμα σε μορφή HEX, RGB και HSL. Είναι το ισοδύναμο web του σταγονόμετρου σε λογισμικό σχεδιασμού όπως το Photoshop, το GIMP ή το Figma.

Το εργαλείο μας λειτουργεί απευθείας στο πρόγραμμα περιήγησής σας. Ανεβάζεις την εικόνα σου, εμφανίζεται στη σελίδα και πρέπει απλώς να κάνετε κλικ σε ένα pixel για να ανακτήσετε το χρώμα του. Διαβάζοντας το pixel γίνεται από την πλευρά του πελάτη μέσω του API καμβά, χωρίς δρομολόγιο διακομιστή, χωρίς επανασυμπίεση και χωρίς αποστολή την εικόνα στο δίκτυο για επιλογή.

Διαφορά με έναν εξολκέα χρώματος

Ο εξαγωγέας χρώματος και ο επιλογέας χρώματος απαντούν σε δύο διακριτές ανάγκες, τις οποίες είναι χρήσιμο να διακρίνουμε ξεκάθαρα:

Ο εξαγωγέας αναλύει ολόκληρη την εικόνα και επιστρέφει την κυρίαρχη παλέτα (οι 5, 8 ή 10 πιο αντιπροσωπευτικές αποχρώσεις). Είναι το εργαλείο επιλογής για τη σύνθεση της ατμόσφαιρας χρωματομετρία μιας φωτογραφίας, δημιουργήστε έναν πίνακα διάθεσης ή τροφοδοτήστε έναν χάρτη.
Ο επιλογέας χρώματος επιστρέφει το ακριβές χρώμα ένα συγκεκριμένο pixel που εσείς ορίζουν. Είναι το εργαλείο επιλογής όταν ξέρετε πού να κοιτάξετε: ένα λογότυπο σε μια αποτύπωση, μια απόχρωση ακριβής κλίση, μια ταπετσαρία αναφοράς.

Ο εξαγωγέας λειτουργεί σε εκατομμύρια pixel και εφαρμόζει ομαδοποίηση για να αναδείξει ομάδες χρώματα? ο επιλογέας απλώς διαβάζει την τιμή RGB που είναι αποθηκευμένη στη θέση που κάνετε κλικ. Το το πρώτο γενικεύει, το δεύτερο είναι χειρουργικό.

Πώς λειτουργεί, τεχνικά

Μια ψηφιακή εικόνα είναι ένα πλέγμα από pixel, κάθε pixel που φέρει τρία κανάλια RGB (κόκκινο, πράσινο, μπλε) γενικά κωδικοποιούνται σε 8 bit, ή 256 τιμές ανά κανάλι. Όταν κάνετε κλικ σε ένα σημείο, το εργαλείο:

Σχεδιάζει την εικόνα σας σε στοιχείο καμβά, διατηρώντας τις εγγενείς διαστάσεις της (με οροφή πλάτος 1500 pixel για να παραμένει άνετη στην οθόνη).
Μετατρέπει τη θέση κλικ σε εγγενείς συντεταγμένες εικόνας, αντισταθμίζοντας την αλλαγή μεγέθους εμφάνιση προγράμματος περιήγησης.
Διαβάζει την τιμή RGBA του pixel μέσω του API canvas.getContext('2d').getImageData(x, y, 1, 1).
Εμφανίζει μια προεπισκόπηση του επιλογέα χρώματος. Κατά την υποβολή, ο διακομιστής διαβάζει την ίδια θέση με την PHP GD και υπολογίζει τους τελικούς κωδικούς HEX, RGB και HSL.

Η τιμή HSL υπολογίζεται από την υπηρεσία μετατροπής χρωμάτων μας, η ίδια με αυτή που χρησιμοποιείται από εμάς μετατροπέας χρωμάτων. Συνοχή από άκρο σε άκρο, θα έχετε τις ίδιες τιμές σαν να είχατε πληκτρολογήσει τον κωδικό HEX στον μετατροπέα.

Τυπικές περιπτώσεις χρήσης

Αναπαράγετε ένα χρώμα στιγμιότυπου οθόνης: έχετε ένα στιγμιότυπο οθόνης ενός ιστότοπου, εσείς θέλετε να ταιριάζει με το ακριβές χρώμα ενός κουμπιού ή φόντου. Ο επιλογέας σας δίνει τον κωδικό HEX ακριβής για επικόλληση στο CSS σας.
Προσδιορίστε ένα χρώμα γραφήματος σε μια φωτογραφία: ένα PDF παρουσίασης, μια σελίδα του περιοδικό, ένα οπτικό προϊόν. Δεν χρειάζεται πλέον να ζητάτε το γράφημα, διαβάζετε απευθείας το χρώμα.
Αντίστροφη μηχανική οπτικής ταυτότητας: αποτυπώνοντας ακριβώς το μπλε ενός λογότυπου, το ροζ ενός πανό, το πορτοκαλί μιας παρότρυνσης για δράση.
Παρακολούθηση έμπνευσης και σχεδίασης: βλέπετε μια φωτογραφία που σας αρέσει, την καταλαβαίνετε την ακριβή απόχρωση ενός λουλουδιού, ενός τοίχου, μιας αφίσας.
Εντοπισμός σφαλμάτων διεπαφής: το στιγμιότυπο οθόνης σφάλματος εμφανίζει λάθος χρώμα, διαβάζετε η πραγματική τιμή προς σύγκριση με αυτήν που αναμένεται στο μοντέλο.
Δημιουργία παλέτας από αναφορά: επιλέγετε πολλά σημεία από α την ίδια εικόνα για να δημιουργήσετε εκ νέου μια εξατομικευμένη παλέτα.

Πώς να χρησιμοποιήσετε τον επιλογέα χρώματος

Μεταφορτώστε την εικόνα σας (PNG, JPG, GIF, BMP, WebP, έως 20 MB).
Στη σελίδα εμφανίζεται μια προεπισκόπηση. Κάντε κλικ σε ένα pixel για να ανακτήσετε το χρώμα του.
Ένα σκόπευτρο επισημαίνει τη θέση στην οποία έγινε κλικ και μια προεπισκόπηση του χρώματος εμφανίζεται δίπλα του.
Επικυρώστε με το κουμπί υποβολής για να λάβετε το τελικό αποτέλεσμα: έγχρωμο τετράγωνο, HEX, RGB και κώδικας HSL.
Για να μετατρέψετε την τιμή μεταξύ των μορφών, χρησιμοποιήστε τη δική μας μετατροπέας χρωμάτων.

Συχνές ερωτήσεις

Ποια είναι η διαφορά μεταξύ HEX, RGB και HSL;

Πρόκειται για τρεις παραστάσεις του ίδιου χρώματος. Το HEX (#ff0000) είναι το η πιο χρησιμοποιούμενη μορφή στο CSS. Το RGB εκφράζει τα τρία κανάλια κόκκινο / πράσινο / μπλε τιμές 0-255. Το HSL (Απόχρωση, Κορεσμός, Ελαφρότητα) είναι πιο διαισθητικό για την προσαρμογή του α απόχρωση: αυτή είναι η προτιμώμενη μορφή όταν θέλετε να σκουρύνετε, να αποκορεσθεί ή να τροποποιήσετε ένα χρώμα χωρίς αλλαγή της βασικής απόχρωσης.

Γιατί το κλικ μου δεν επιστρέφει ακριβώς το αναμενόμενο χρώμα;

Σε μια περιοχή κλίσης, δύο γειτονικά εικονοστοιχεία μπορεί να έχουν πολύ διαφορετικές τιμές. Επιπλέον, Οι εικόνες JPG συμπιέζονται με απώλειες: το χρώμα ενός pixel μπορεί να διαφέρει ελαφρώς από το το πρωτότυπο. Για αξιόπιστους χρωματικούς κωδικούς, προτιμήστε PNG ή μη συμπιεσμένες εικόνες.

Οι συντεταγμένες μου προέρχονται από την οθόνη ή από την εικόνα;

Αυτά της αρχικής εικόνας. Το σενάριο JavaScript μετατρέπει αυτόματα τη θέση κλικ (σε εικονοστοιχεία οθόνης) στη θέση στην εγγενή εικόνα. Εάν η εικόνα σας είναι 4000x3000 και είναι εμφανίζεται σε 800x600, κάνοντας κλικ στο κέντρο θα επιστρέψετε (2000, 1500) και όχι (400, 300).

Λειτουργεί το εργαλείο επιλογής με διαφανείς εικόνες;

Ναι. Εάν κάνετε κλικ σε ένα διαφανές pixel, ανακτάτε το χρώμα RGB που είναι αποθηκευμένο εκεί (συχνά λευκό ή μαύρο ανάλογα με τον αρχικό εκδότη). Η ίδια η διαφάνεια (κανάλι άλφα) δεν επιστρέφεται στο αποτέλεσμα. Για να αναλύσετε ένα κανάλι άλφα, ανοίξτε την εικόνα σε α επεξεργαστής γραφικών.

Τι μέγεθος εικόνας είναι αποδεκτό;

Έως 20 MB, PNG, JPG, GIF, BMP και WebP μορφές. Οι πολύ μεγάλες εικόνες εμφανίζονται στο 1500 μέγιστο πλάτος pixel για να παραμένει άνετα στην οθόνη, αλλά το χρώμα που διαβάζεται παραμένει αυτό του αρχικό pixel, χωρίς επαναδειγματοληψία.

Είναι αποθηκευμένες οι εικόνες μου στον διακομιστή;

Όχι. Η επιλογή γίνεται στο πρόγραμμα περιήγησής σας. Κατά τη στιγμή της υποβολής, το αρχείο υποβάλλεται σε επεξεργασία on the fly για να επιβεβαιώσετε το χρώμα του ζητούμενου pixel και, στη συνέχεια, το προσωρινό αρχείο διαγράφεται. Δεν αποθηκεύονται, καταχωρούνται ή κοινοποιούνται εικόνες.

Τι θα συμβεί εάν η JavaScript είναι απενεργοποιημένη;

Η υποβολή κλασικής φόρμας παραμένει δυνατή. Οι συντεταγμένες x και y διαχειρίζονται από κρυφά πεδία που συμπληρώνει η JavaScript όταν κάνετε κλικ. Χωρίς JavaScript, αυτά τα πεδία παραμένουν κενά και το Η φόρμα θα αναφέρει ότι λείπει μια θέση, αλλά η ίδια η εικόνα μεταδίδεται στο διακομιστή για επεξεργασία.

Παράδειγμα αιτήματος

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Σχήμα εισόδου

Πεδίο	Τύπος	Απαιτείται	Προεπιλογή
`image`	file	✓	–
`x`	string	–	–
`y`	string	–	–

αυτό το εργαλείο αναμένει αρχείο - χρησιμοποιήστε Content-Type multipart/form-data αντί για application/json

Σημεία πρόσβασης

GET https://cdrn.fr/api/v1/tools - εμφανίζει όλα τα διαθέσιμα εργαλεία
GET https://cdrn.fr/api/v1/tools/color-picker - ανακτά το σχήμα αυτού του εργαλείου
POST https://cdrn.fr/api/v1/tools/color-picker/execute - εκτελεί αυτό το εργαλείο με payload JSON