CDRN

Zajeti barvo piksla iz slike

  • Nadzorna plošča
  • Dokumentacija
  • API
pridobi natančno barvo piksla vaše slike (RGB, HSL, heksadecimalna) s klikom na izbrano točko

Kaj je izbirnik barv slike?

Izbirnik barv (v francoščini barvna pipeta ali zajem barv) je orodje, ki povrne natančno vrednost izbranega piksla na sliki. Naložiš fotografijo, ti kliknite na točko, ki vas zanima, in orodje vrne natančno barvo v obliki HEX, RGB in HSL. Je spletni ekvivalent kapalke v programski opremi za oblikovanje, kot je Photoshop, GIMP ali Figma.

Naše orodje deluje neposredno v vašem brskalniku. Naložite svojo sliko, prikazana je na strani in preprosto morate klikniti slikovno piko, da pridobite njeno barvo. Branje slikovne pike poteka na strani odjemalca prek API-ja canvas, brez povratnih potovanj strežnika, brez ponovnega stiskanja in brez pošiljanja sliko v omrežju za izbiro.

Razlika z barvnim ekstraktorjem

Naš barvni ekstraktor in naš izbirnik barv odgovorita na dve različne potrebe, ki jih je koristno jasno razlikovati:

  • Izvleček analizira celotno sliko in vrne prevladujočo paleto (5, 8 ali 10 najbolj zastopanih odtenkov). Je izbrano orodje za sintetiziranje atmosfere kolorimetrijo fotografije, ustvarite tablo razpoloženja ali negujte listino.
  • Izbirnik barv vrne natančno barvo določene slikovne pike, ki ste jo določiti. To je orodje izbire, ko veste, kje iskati: logotip v posnetku, niansa natančen gradient, referenčno ozadje.

Ekstraktor deluje na milijone slikovnih pik in uporablja združevanje v gruče, da prikaže skupine barve; izbirnik samo prebere vrednost RGB, shranjeno na mestu, ki ga kliknete. The prvi je generalizacijski, drugi je kirurški.

Kako deluje, tehnično

Digitalna slika je mreža slikovnih pik, vsaka slikovna pika nosi tri kanale RGB (rdeč, zelen, moder) običajno kodiran na 8 bitov ali 256 vrednosti na kanal. Ko kliknete točko, orodje:

  1. Nariše vašo sliko v elementu platna, pri čemer ohrani njene izvirne dimenzije (s stropom 1500 slikovnih pik širok, da ostane udobno na zaslonu).
  2. Pretvori položaj klika v izvorne slikovne koordinate, s čimer kompenzira spreminjanje velikosti prikaz brskalnika.
  3. Prebere vrednost RGBA piksla prek API-ja canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Prikaže predogled izbirnika barv. Ob predložitvi strežnik prebere isti položaj s PHP GD in izračuna končne kode HEX, RGB in HSL.

Vrednost HSL izračuna naša storitev pretvorbe barv, enaka tisti, ki jo uporablja naš pretvornik barv. Doslednost od konca do konca, dobite enake vrednosti, kot če bi v pretvornik vnesli HEX kodo.

Tipični primeri uporabe

  • Reproduciraj barvo posnetka zaslona: imate posnetek zaslona spletnega mesta, se želite natančno ujemati z barvo gumba ali ozadja. Izbirnik vam da kodo HEX natančen za lepljenje v vaš CSS.
  • Prepoznajte barvo grafikona na fotografiji: predstavitveni PDF, stran od revija, vizualni izdelek. Ni vam treba več zahtevati grafikona, barvo preberete neposredno.
  • Vzvratni inženiring vizualne identitete: zajemanje natančne modre barve logotipa, roza pasice, oranžna poziva k dejanju.
  • Navdih in spremljanje oblikovanja: vidite fotografijo, ki vam je všeč, jo dobite natančen odtenek rože, stene, plakata.
  • Odpravljanje napak: posnetek zaslona hrošča prikazuje napačno barvo, berete dejansko vrednost za primerjavo s pričakovano v modelu.
  • Ustvarjanje palete iz reference: izberete več točk iz a isto sliko za ponovno ustvarjanje personalizirane palete.

Kako uporabljati izbirnik barv

  1. Naložite svojo sliko (PNG, JPG, GIF, BMP, WebP, do 20 MB).
  2. Na strani je prikazan predogled. Kliknite slikovno piko, da pridobite njeno barvo.
  3. Iskalo označuje kliknjeni položaj in zraven se prikaže predogled barve.
  4. Potrdite z gumbom za pošiljanje, da dobite končni rezultat: barvni kvadrat, HEX, RGB in HSL koda.
  5. Za pretvorbo vrednosti med formati uporabite naš pretvornik barv.

Pogosta vprašanja

Kakšna je razlika med HEX, RGB in HSL?

To so trije prikazi iste barve. HEX (#ff0000) je najbolj uporabljen format v CSS. RGB izraža tri kanale v rdeči/zeleni/modri barvi vrednosti 0-255. HSL (Hue, Saturation, Lightness) je bolj intuitiven za prilagajanje odtenek: to je prednostna oblika, ko želite potemniti, razbarvati ali spremeniti a barva brez spreminjanja osnovnega odtenka.

Zakaj moj klik ne vrne točno pričakovane barve?

Na območju preliva imata lahko dve sosednji slikovni piki zelo različne vrednosti. Še več, Slike JPG so stisnjene z izgubo: barva slikovne pike se lahko nekoliko razlikuje od izvirnik. Za zanesljive barvne kode raje izberite PNG ali nestisnjene slike.

So moje koordinate z zaslona ali s slike?

Tiste izvirne slike. Naš skript JavaScript samodejno pretvori položaj klika (v slikovnih pikah zaslona) na položaj v izvorni sliki. Če je vaša slika 4000x3000 in je je prikazano pri 800x600, s klikom na sredino se vam vrne (2000, 1500) in ne (400, 300).

Ali izbirnik deluje s prosojnimi slikami?

ja Če kliknete prozorno slikovno piko, pridobite tam shranjeno barvo RGB (pogosto bela ali črna, odvisno od prvotnega založnika). Sama preglednost (alfa kanal) se ne vrne v rezultatu; Če želite analizirati alfa kanal, odprite sliko v a grafični urejevalnik.

Kakšna velikost slike je sprejemljiva?

Do 20 MB, formati PNG, JPG, GIF, BMP in WebP. Zelo velike slike so prikazane pri 1500 največja širina slikovnih pik, da ostane udobno na zaslonu, vendar barvni odčitek ostane enak originalna slikovna pika, brez ponovnega vzorčenja.

Ali so moje slike shranjene na strežniku?

Ne. Izbira poteka v vašem brskalniku. Ob oddaji je datoteka obdelana sproti, da potrdite barvo zahtevane slikovne pike, nato pa se začasna datoteka izbriše. Nobena slika ni shranjena, indeksirana ali deljena.

Kaj se zgodi, če je JavaScript onemogočen?

Klasična oddaja obrazca ostaja možna. Koordinate x in y upravlja skrita polja, ki jih JavaScript izpolni ob kliku. Brez JavaScripta ostanejo ta polja prazna in obrazec bo sporočil, da položaj manjka, vendar se sama slika prenese v strežnik za obdelavo.

Primer zahteve

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

Vhodna shema

Polje Tip Obvezno Privzeto
image file ✓ –
x string – –
y string – –

to orodje pričakuje datoteko - uporabite Content-Type multipart/form-data namesto application/json

Končne točke

  • GET https://cdrn.fr/api/v1/tools - izpiše vsa razpoložljiva orodja
  • GET https://cdrn.fr/api/v1/tools/color-picker - pridobi shemo tega orodja
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - izvede to orodje s JSON payloadom