CDRN

Uhvatiti boju piksela slike

  • Nadzorna ploča
  • Dokumentacija
  • API
dohvaća točnu boju piksela vaše slike (RGB, HSL, heksadecimalna) klikom na odabranu točku

Što je birač boja slike?

Birač boja (na francuskom pipeta boje ili hvatanje boja) je alat koji vraća točnu vrijednost odabranog piksela na slici. Učitaš fotografiju, ti kliknite na točku koja vas zanima, a alat vraća preciznu boju u HEX, RGB i HSL obliku. To je web-ekvivalent kapaljke u softveru za dizajn poput Photoshopa, GIMP-a ili Figme.

Naš alat radi izravno u vašem pregledniku. Učitate svoju sliku, ona se prikaže na stranici, a vi samo trebate kliknuti na piksel da biste dohvatili njegovu boju. Čitanje piksela radi se na strani klijenta putem canvas API-ja, bez obilaska poslužitelja, bez rekompresije i bez slanja sliku na mreži za odabir.

Razlika s ekstraktorom boja

Naš ekstraktor boja i naš birač boja odgovaraju na dva različite potrebe, koje je korisno jasno razlikovati:

  • Ekstraktor analizira cijelu sliku i vraća dominantnu paletu (5, 8 ili 10 najzastupljenijih nijansi). To je alat izbora za sintetiziranje atmosfere kolorimetriju fotografije, izradite ploču raspoloženja ili njegujte povelju.
  • Birač boja vraća točnu boju određenog piksela koji ste odrediti. To je alat izbora kada znate gdje tražiti: logo u snimci, nijansa precizan gradijent, referentna pozadina.

Ekstraktor radi na milijunima piksela i primjenjuje klasteriranje kako bi izvukao grupe boje; birač samo čita RGB vrijednost pohranjenu na poziciji koju kliknete. The prvi generalizira, drugi je kirurški.

Kako to radi, tehnički

Digitalna slika je mreža piksela, a svaki piksel nosi tri RGB kanala (crveni, zeleni, plavi) općenito kodirano na 8 bita, ili 256 vrijednosti po kanalu. Kada kliknete na točku, alat:

  1. Crta vašu sliku u elementu platna, zadržavajući izvorne dimenzije (sa stropom 1500 piksela širine kako biste ostali ugodni na zaslonu).
  2. Pretvara položaj klika u izvorne koordinate slike, kompenzirajući promjenu veličine prikaz preglednika.
  3. Čita RGBA vrijednost piksela putem API-ja canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Pokazuje pregled alata za odabir boja. Prilikom podnošenja, poslužitelj čita istu poziciju s PHP-om GD i izračunava konačne HEX, RGB i HSL kodove.

HSL vrijednost izračunava naša usluga pretvorbe boja, ista kao i naša pretvarač boja. Dosljednost od kraja do kraja, dobivate iste vrijednosti kao da ste upisali HEX kod u pretvarač.

Tipični slučajevi upotrebe

  • Reprodukcija snimke zaslona u boji: imate snimku zaslona stranice, želite točno uskladiti boju gumba ili pozadine. Birač vam daje HEX kod precizan za lijepljenje u vaš CSS.
  • Prepoznajte boju karte na fotografiji: prezentacijski PDF, stranica od časopis, vizual proizvoda. Više ne morate tražiti grafikon, izravno čitate boju.
  • Obrnuti inženjering vizualnog identiteta: snimanje točne plave boje logotipa, ružičaste natpisa, narančasta boja poziva na akciju.
  • Inspiracija i praćenje dizajna: vidite fotografiju koja vam se sviđa, dobit ćete je točna nijansa cvijeta, zida, postera.
  • Isprednji dio za otklanjanje pogrešaka: snimka zaslona bugova prikazuje pogrešnu boju, čitate stvarna vrijednost za usporedbu s očekivanom u modelu.
  • Stvaranje palete iz reference: odabirete nekoliko točaka iz a ista slika za ponovno stvaranje personalizirane palete.

Kako koristiti birač boja

  1. Učitajte svoju sliku (PNG, JPG, GIF, BMP, WebP, do 20 MB).
  2. Pregled je prikazan na stranici. Kliknite na piksel da biste dohvatili njegovu boju.
  3. Tražilo označava položaj na koji ste kliknuli, a pokraj njega se pojavljuje pregled boje.
  4. Potvrdite pomoću gumba za slanje kako biste dobili konačni rezultat: kvadrat u boji, HEX, RGB i HSL kod.
  5. Za transformaciju vrijednosti između formata, koristite naš pretvarač boja.

Često postavljana pitanja

Koja je razlika između HEX, RGB i HSL?

Ovo su tri prikaza iste boje. HEX (#ff0000) je najkorišteniji format u CSS-u. RGB izražava tri kanala crvena/zelena/plava vrijednosti 0-255. HSL (Hue, Saturation, Lightness) intuitivnije je prilagoditi nijansa: ovo je preferirani format kada želite potamniti, desaturirati ili modificirati a boja bez promjene osnovne nijanse.

Zašto moj klik ne vraća točno očekivanu boju?

Na području gradijenta, dva susjedna piksela mogu imati vrlo različite vrijednosti. Štoviše, JPG slike su komprimirane s gubitkom: boja piksela može se malo razlikovati od izvornik. Za pouzdane kodove boja dajte prednost PNG-ovima ili nekomprimiranim slikama.

Jesu li moje koordinate s ekrana ili sa slike?

One originalne slike. Naša JavaScript skripta automatski pretvara poziciju klika (u pikselima zaslona) na položaj u izvornoj slici. Ako je vaša slika 4000x3000 i to prikazuje se u 800x600, klikom na sredinu vratit ćete (2000, 1500), a ne (400, 300).

Radi li alat za odabir s prozirnim slikama?

da Ako kliknete na prozirni piksel, dohvaćate RGB boju koja je tamo pohranjena (često bijele ili crne, ovisno o izvornom izdavaču). Sama transparentnost (alfa kanal) ne vraća se u rezultatu; Za analizu alfa kanala otvorite sliku u a grafički urednik.

Koja je veličina slike prihvaćena?

Do 20 MB, PNG, JPG, GIF, BMP i WebP formati. Vrlo velike slike prikazuju se na 1500 maksimalnu širinu u pikselima kako bi ostao udoban na zaslonu, ali očitavanje boja ostaje kao kod izvorni piksel, bez ponovnog uzorkovanja.

Jesu li moje slike pohranjene na poslužitelju?

Ne. Odabir se vrši u vašem pregledniku. U trenutku podnošenja datoteka se obrađuje u hodu za potvrdu boje traženog piksela, a zatim se privremena datoteka briše. Nijedna slika se ne pohranjuje, indeksira niti dijeli.

Što se događa ako je JavaScript onemogućen?

Klasična predaja obrasca ostaje moguća. X i y koordinatama upravlja skrivena polja koja JavaScript ispunjava na klik. Bez JavaScripta ova polja ostaju prazna i obrazac će prijaviti da pozicija nedostaje, ali sama slika se prenosi u poslužitelj za obradu.

Primjer zahtjeva

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

Ulazna shema

Polje Tip Obavezno Zadano
image file ✓ –
x string – –
y string – –

ovaj alat očekuje datoteku - koristite Content-Type multipart/form-data umjesto application/json

Krajnje točke

  • GET https://cdrn.fr/api/v1/tools - ispisuje sve dostupne alate
  • GET https://cdrn.fr/api/v1/tools/color-picker - dohvaća shemu ovog alata
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - izvršava ovaj alat s JSON payloadom