CDRN

Tartu kuvan pikselin väriin

  • Hallintapaneeli
  • Dokumentaatio
  • API
hakee kuvasi pikselin tarkan värin (RGB, HSL, heksadesimaali) napsauttamalla valittua pistettä

Mikä on kuvan värivalitsin (color picker)?

Värivalitsin (englanniksi color picker, ranskaksi pipette à couleurs) on työkalu, joka palauttaa kuvasta valitun pikselin tarkan arvon. Lataat valokuvan, napsautat haluamaasi kohtaa, ja työkalu palauttaa tarkan värin HEX-, RGB- ja HSL-muodossa. Se on verkkopohjainen vastine suunnitteluohjelmistojen, kuten Photoshopin, GIMP:n tai Figman, pipettityökalulle.

Työkalumme toimii suoraan selaimessasi. Lataat kuvasi, se näytetään sivulla, ja sinun tarvitsee vain napsauttaa pikseliä saadaksesi sen värin. Pikselin luku tapahtuu asiakaspuolella canvas-sovellusliittymän kautta ilman edestakaista liikennöintiä palvelimelle, ilman uudelleenpakkausta ja lähettämättä kuvaa verkkoon valintaa varten.

Ero väripaletin poimijaan

Väripaletin poimijamme ja värivalitsimememme vastaavat kahteen eri tarpeeseen, jotka on hyödyllistä erottaa toisistaan:

  • Poimija analysoi koko kuvan ja palauttaa hallitsevan paletin (5, 8 tai 10 eniten edustettua sävyä). Se on oikea työkalu valokuvan väritunnelman tiivistämiseen, moodboardin luomiseen tai graafisen ohjeiston pohjaksi.
  • Värivalitsin palauttaa täsmälleen yhden tietyn pikselin värin. Se on oikea työkalu, kun tiedät mitä kohtaa katsoa: logo kuvakaappauksessa, tietty liukuvärin sävy tai viitestaustakuva.

Poimija käsittelee miljoonia pikseleitä ja käyttää klusterointia väryhmien löytämiseen; valitsin vain lukee napsautetun kohdan RGB-arvon. Ensimmäinen yleistää, toinen on kirurgisen tarkka.

Miten se toimii teknisesti

Digitaalinen kuva on pikseliruudukko, jossa jokaisella pikselillä on kolme RGB-kanavaa (punainen, vihreä, sininen), jotka on yleensä koodattu 8 bitillä, eli 256 arvoa kanavaa kohden. Kun napsautat kohtaa, työkalu:

  1. Piirtää kuvasi canvas-elementtiin säilyttäen sen alkuperäiset mitat (enintään 1500 pikselin leveys näytön mukavuuden vuoksi).
  2. Muuntaa napsautuskohdan kuvan alkuperäisiksi koordinaateiksi ottaen huomioon selaimen tekemän koon muutoksen.
  3. Lukee pikselin RGBA-arvon canvas.getContext('2d').getImageData(x, y, 1, 1) -rajapinnan kautta.
  4. Näyttää esikatselun valitusta väristä. Lähetyksen yhteydessä palvelin lukee saman kohdan PHP GD:llä ja laskee lopulliset HEX-, RGB- ja HSL-koodit.

HSL-arvo lasketaan värimuunnos-palvelullamme, joka on sama kuin värimuuntimessamme. Johdonmukaisuus on taattu: saat samat arvot kuin jos olisit kirjoittanut HEX-koodin muuntimeen.

Tyypillisiä käyttötapauksia

  • Värin kopioiminen kuvakaappauksesta : Sinulla on kuvakaappaus sivustosta ja haluat käyttää täsmälleen samaa painikkeen tai taustan sävyä. Valitsin antaa tarkan HEX-koodin CSS-tiedostoosi.
  • Graafisen ohjeiston värin tunnistaminen valokuvasta : Esitys-PDF, aikakauslehti tai tuotekuva. Ohjeistoa ei tarvitse kysyä, voit lukea värin suoraan.
  • Visuaalisen identiteetin takaisinmallinnus : Logon tarkan sinisen, bannerin vaaleanpunaisen tai toimintakehotteen oranssin poimiminen.
  • Inspiraatio ja suunnittelun seuranta : Näet kuvan, josta pidät, ja haluat poimia kukan, seinän tai julisteen tarkan sävyn.
  • Front-end-virheenkorjaus : Bugikuvakaappaus näyttää väärän värin; voit lukea todellisen arvon verrataksesi sitä suunnitelmassa odotettuun arvoon.
  • Paletin luominen viitteestä : Valitset useita pisteitä samasta kuvasta muodostaaksesi yksilöllisen paletin.

Miten värivalitsinta käytetään

  1. Lataa kuvasi (PNG, JPG, GIF, BMP, WebP, enintään 20 Mt).
  2. Sivulla näkyy esikatselu. Napsauta pikseliä saadaksesi sen värin.
  3. Tähtäin merkitsee napsautetun kohdan, ja värin esikatselu ilmestyy viereen.
  4. Vahvista lähetyspainikkeella saadaksesi lopullisen tuloksen: värillinen neliö, HEX-, RGB- ja HSL-koodit.
  5. Voit muuntaa arvon eri muotojen välillä värimuuntimellamme.

Usein kysytyt kysymykset

Mitä eroa on HEX-, RGB- ja HSL-muodoilla?

Ne ovat kolme esitystapaa samalle värille. HEX (#ff0000) on CSS:ssä yleisimmin käytetty muoto. RGB ilmaisee kolme kanavaa (punainen / vihreä / sininen) arvoilla 0–255. HSL (Hue, Saturation, Lightness) on intuitiivisempi sävyn säätämiseen: se on paras muoto, kun haluat tummentaa, vähentää värikylläisyyttä tai muuttaa väriä muuttamatta perussävyä.

Miksi napsautukseni ei palauta täsmälleen odotettua väriä?

Liukuvärialueella kahdella vierekkäisellä pikselillä voi olla hyvinkin eri arvot. Lisäksi JPG-kuvat on pakattu häviöllisesti: pikselin väri voi poiketa hieman alkuperäisestä. Luotettavien värikoodien saamiseksi suosi PNG-kuvia tai pakkaamattomia kuvia.

Ovatko koordinaatit näytön vai kuvan koordinaatteja?

Alkuperäisen kuvan. JavaScript-skriptimme muuntaa napsautuskohdan (näyttöpikseleinä) automaattisesti alkuperäisen kuvan sijainniksi. Jos kuvasi on 4000x3000 ja se näytetään koossa 800x600, napsautus keskelle palauttaa (2000, 1500) eikä (400, 300).

Toimiiko värivalitsin läpinäkyvien kuvien kanssa?

Kyllä. Jos napsautat läpinäkyvää pikseliä, saat kyseiseen kohtaan tallennetun RGB-värin (usein valkoinen tai musta alkuperäisestä editorista riippuen). Itse läpinäkyvyyttä (alfakanavaa) ei palauteta tuloksessa; alfakanavan analysoimiseksi avaa kuva kuvankäsittelyohjelmassa.

Mikä on suurin sallittu kuvan koko?

Enintään 20 Mt, muodot PNG, JPG, GIF, BMP ja WebP. Erittäin suuret kuvat näytetään enintään 1500 pikselin levyisinä näytön mukavuuden vuoksi, mutta luettu väri on silti alkuperäisen pikselin väri ilman uudelleennäytteistystä.

Säilytetäänkö kuviani palvelimella?

Ei. Valinta tapahtuu selaimessasi. Lähetyshetkellä tiedosto käsitellään lennossa pyydetyn pikselin värin vahvistamiseksi, minkä jälkeen väliaikainen tiedosto poistetaan. Kuvia ei säilytetä, indeksoida tai jaeta.

Mitä tapahtuu, jos JavaScript on poistettu käytöstä?

Lomakkeen perinteinen lähettäminen on edelleen mahdollista. JavaScript täyttää piilokentät x- ja y-koordinaateilla napsautuksen yhteydessä. Ilman JavaScriptiä nämä kentät jäävät tyhjiksi ja lomake ilmoittaa sijainnin puuttuvan, mutta itse kuva välittyy silti palvelimelle käsiteltäväksi.

Pyyntöesimerkki

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

Syöteskeema

Kenttä Tyyppi Pakollinen Oletus
image file ✓ –
x string – –
y string – –

tämä työkalu odottaa tiedostoa - käytä Content-Type multipart/form-data:a application/json:in sijaan

Päätepisteet

  • GET https://cdrn.fr/api/v1/tools - listaa kaikki saatavilla olevat työkalut
  • GET https://cdrn.fr/api/v1/tools/color-picker - hakee tämän työkalun skeeman
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - suorittaa tämän työkalun JSON-payloadilla