CDRN

Užfiksuoti paveikslo pikselio spalvą

  • Skydelis
  • Dokumentacija
  • API
gauna tikslią pikselio spalvą iš jūsų paveikslo (RGB, HSL, šešioliktainė) spustelėjus pasirinktą tašką

Kas yra vaizdo spalvų rinkiklis?

spalvų rinkiklis (prancūziškai spalvų pipetė arba spalvų fiksavimas) yra įrankis, atkuriantis tikslią pasirinkto vaizdo pikselio reikšmę. Jūs įkeliate nuotrauką, jūs spustelėkite jus dominantį tašką ir įrankis grąžins tikslią spalvą HEX, RGB ir HSL formomis. Tai internetinis akių lašintuvo atitikmuo projektavimo programinėje įrangoje, pvz., Photoshop, GIMP ar Figma.

Mūsų įrankis veikia tiesiogiai jūsų naršyklėje. Įkeliate savo vaizdą, jis rodomas puslapyje ir tereikia spustelėti pikselį, kad gautumėte jo spalvą. Pikselio skaitymas atliekama kliento pusėje per drobės API, be serverio kelionių pirmyn ir atgal, be pakartotinio suspaudimo ir be siuntimo tinkle esantį vaizdą, kad būtų galima pasirinkti.

Skirtumas su spalvų ištraukikliu

Mūsų spalvų ištraukiklis ir spalvų rinkiklis atsako į du klausimus skirtingus poreikius, kuriuos naudinga aiškiai atskirti:

  • Ištraukimo programa analizuoja visą vaizdą ir grąžina dominuojančią paletę (5, 8 arba 10 dažniausiai atstovaujamų atspalvių). Tai pasirinktas atmosferos sintezės įrankis nuotraukos kolorimetrinis, sukurkite nuotaikos lentą arba puoselėkite chartiją.
  • Spalvų parinkiklis pateikia tikslią konkretaus taško spalvą, kurią jūs paskirti. Tai pasirinkimo įrankis, kai žinai, kur ieškoti: logotipo nuotraukoje, niuansų tikslus gradientas, atskaitos ekrano užsklanda.

Ištraukiklis dirba su milijonais pikselių ir taiko grupes, kad išryškintų grupes spalvos; rinkiklis tiesiog nuskaito RGB reikšmę, saugomą toje vietoje, kurioje spustelėjate. The pirmasis apibendrina, antrasis yra chirurginis.

Kaip tai veikia, techniškai

Skaitmeninis vaizdas yra pikselių tinklelis, kuriame kiekvienas pikselis turi tris RGB kanalus (raudoną, žalią, mėlyną) paprastai koduojami 8 bitais arba 256 reikšmėmis kanale. Spustelėjus tašką, įrankis:

  1. Nupiešiamas vaizdas drobės elemente, išlaikant jo pradinius matmenis (su lubomis 1500 pikselių pločio, kad ekrane būtų patogu).
  2. Konvertuoja paspaudimo padėtį į vietines vaizdo koordinates, kompensuodama dydžio keitimą naršyklės ekranas.
  3. Nuskaito pikselio RGBA reikšmę per API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Rodo spalvų rinkiklio peržiūrą. Pateikus, serveris nuskaito tą pačią poziciją su PHP GD ir apskaičiuoja galutinius HEX, RGB ir HSL kodus.

HSL vertę apskaičiuoja mūsų spalvų konvertavimo paslauga, ta pati, kurią naudoja mūsų spalvų keitiklis. Jūs gaunate nuoseklumą iki galo tos pačios reikšmės, tarsi į keitiklį įvedėte HEX kodą.

Tipiški naudojimo atvejai

  • Atkurkite ekrano kopijos spalvą: turite svetainės ekrano kopiją, nori tiksliai atitikti mygtuko arba fono spalvą. Rinkiklis suteikia jums HEX kodą tiksliai įklijuoti į savo CSS.
  • Nurodykite diagramos spalvą nuotraukoje: pristatymo PDF, puslapis žurnalas, produkto vizualas. Nebereikia prašyti diagramos, spalvą perskaitysite tiesiogiai.
  • Vizualinės tapatybės atvirkštinė inžinerija: tiksliai užfiksuojama logotipo mėlyna spalva – rožinė reklamjuostės, apelsino – raginimo veikti.
  • Įkvėpimo ir dizaino stebėjimas: pamatysite jums patinkančią nuotrauką ir ją gausite tikslus gėlės, sienos, plakato atspalvis.
  • Derinimo sąsaja: trikties ekrano kopijoje rodoma neteisinga spalva, jūs perskaitote faktinė vertė, kurią reikia palyginti su ta, kurios tikimasi modelyje.
  • Paletės kūrimas iš nuorodos: pasirenkate kelis taškus iš a tą patį vaizdą, kad atkurtumėte suasmenintą paletę.

Kaip naudoti spalvų rinkiklį

  1. Įkelkite savo vaizdą (PNG, JPG, GIF, BMP, WebP, iki 20 MB).
  2. Puslapyje rodoma peržiūra. Spustelėkite pikselį, kad gautumėte jo spalvą.
  3. Vaizdo ieškiklis pažymi spustelėjimo vietą, o šalia jos rodoma spalvos peržiūra.
  4. Patvirtinkite naudodami pateikimo mygtuką, kad gautumėte galutinį rezultatą: spalvotas kvadratas, HEX, RGB ir HSL kodas.
  5. Jei norite pakeisti reikšmę tarp formatų, naudokite mūsų spalvų keitiklis.

Dažnai užduodami klausimai

Kuo skiriasi HEX, RGB ir HSL?

Tai trys tos pačios spalvos atvaizdai. HEX (#ff0000) yra dažniausiai naudojamas CSS formatas. RGB išreiškia tris kanalus: raudona / žalia / mėlyna reikšmės 0-255. HSL (atspalvis, sodrumas, šviesumas) intuityviau koreguoti atspalvis: tai yra pageidaujamas formatas, kai norite patamsinti, nusotinti arba modifikuoti a spalva nekeičiant pagrindinio atspalvio.

Kodėl mano paspaudimas nesugrąžina tiksliai norimos spalvos?

Gradiento srityje du gretimi pikseliai gali turėti labai skirtingas reikšmes. Be to, JPG vaizdai suspausti nuostolingai: pikselio spalva gali šiek tiek skirtis nuo originalas. Norėdami gauti patikimus spalvų kodus, pirmenybę teikite PNG arba nesuspaustiems vaizdams.

Ar mano koordinatės iš ekrano ar iš vaizdo?

Tie, kurie yra originalaus vaizdo. Mūsų JavaScript scenarijus automatiškai konvertuoja paspaudimo poziciją (ekrano pikseliais) į vietą vaizde. Jei jūsų vaizdas yra 4000x3000 ir jis rodomas 800 x 600, spustelėjus centre grįšite (2000, 1500), o ne (400, 300).

Ar rinkiklis veikia su skaidriais vaizdais?

Taip. Jei spustelėsite skaidrų pikselį, gausite jame saugomą RGB spalvą (dažnai balta arba juoda, priklausomai nuo pradinio leidėjo). Pats skaidrumas (alfa kanalas) rezultate negrąžinamas; Norėdami analizuoti alfa kanalą, atidarykite vaizdą a grafikos redaktorius.

Koks vaizdo dydis yra priimtinas?

Iki 20 MB, PNG, JPG, GIF, BMP ir WebP formatai. Labai dideli vaizdai rodomi 1500 maksimalus pikselių plotis, kad ekrane liktų patogiai, tačiau nuskaitoma spalva išlieka tokia, kokia yra pradinis pikselis, be pakartotinio atrinkimo.

Ar mano vaizdai saugomi serveryje?

Ne. Pasirinkimas atliekamas jūsų naršyklėje. Pateikimo metu byla apdorojama skrydžio metu patvirtinkite prašomo pikselio spalvą, tada laikinas failas ištrinamas. Jokie vaizdai nesaugomi, indeksuojami ar bendrinami.

Kas nutiks, jei „JavaScript“ išjungta?

Galima pateikti klasikinę formą. X ir y koordinates valdo paslėpti laukai, kuriuos spustelėjus užpildo „JavaScript“. Be JavaScript šie laukai lieka tušti ir forma praneš, kad trūksta pozicijos, bet pats vaizdas perduodamas į serveris apdorojimui.

Užklausos pavyzdys

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

Įvesties schema

Laukas Tipas Privalomas Numatytasis
image file ✓ –
x string – –
y string – –

šis įrankis tikisi failo - naudokite Content-Type multipart/form-data vietoj application/json

Galiniai taškai

  • GET https://cdrn.fr/api/v1/tools - išvardija visus galimus įrankius
  • GET https://cdrn.fr/api/v1/tools/color-picker - gauna šio įrankio schemą
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - vykdo šį įrankį su JSON payload