Zachytiť farbu pixela z obrázka

Čo je obrázkový color picker?

Color picker (po slovensky farebná pipeta alebo zachytávač farby) je nástroj, ktorý obnovuje presnú hodnotu pixela zvoleného na obrázku. Načítate fotku, kliknete na bod, ktorý vás zaujíma, a nástroj vráti presnú farbu vo forme HEX, RGB a HSL. Je to webový ekvivalent pipety v dizajnových programoch ako Photoshop, GIMP alebo Figma.

Náš nástroj funguje priamo vo vašom prehliadači. Nahráte váš obrázok, zobrazí sa na stránke a stačí kliknúť na pixel pre získanie jeho farby. Čítanie pixela sa vykonáva na strane klienta cez canvas API, bez tam-späť na server, bez rekompresie a bez odoslania obrázka cez sieť pre výber.

Rozdiel od extraktora farieb

Náš extraktor farieb a náš color picker odpovedajú na dve odlišné potreby, ktoré je užitočné dobre rozlíšiť:

• Extraktor analyzuje celý obrázok a vracia dominantnú paletu (5, 8 alebo 10 najreprezentovanejších odtieňov). Je to nástroj voľby pre syntézu farebnej atmosféry fotky, vytvorenie mood boardu alebo napájanie charty.
• Color picker vracia presnú farbu presného pixela, ktorý určíte. Je to nástroj voľby, keď viete, kde sa pozerať: logo v capture, presný odtieň gradientu, referenčné pozadie.

Extraktor pracuje na miliónoch pixelov a aplikuje clustering pre vynesenie skupín farieb; picker sa uspokojí s čítaním RGB hodnoty uloženej na pozícii, kde kliknete. Prvý zovšeobecňuje, druhý je chirurgický.

Ako to funguje technicky

Digitálny obrázok je mriežka pixelov, každý pixel nesie tri RGB kanály (červený, zelený, modrý) zvyčajne kódované na 8 bitoch, čiže 256 hodnôt per kanál. Keď kliknete na bod, nástroj:

1. Nakreslí váš obrázok do canvas elementu, zachová jeho natívne rozmery (s limitom 1500 pixelov šírky pre zachovanie pohodlia na obrazovke).
2. Konvertuje pozíciu kliknutia na natívne obrázkové súradnice, kompenzujúc zobrazenie prehliadača.
3. Číta RGBA hodnotu pixela cez canvas.getContext('2d').getImageData(x, y, 1, 1) API.
4. Zobrazí náhľad farby pickera. Pri odoslaní server číta rovnakú pozíciu cez PHP GD a počíta definitívne HEX, RGB a HSL kódy.

HSL hodnota je počítaná naším farebným konverzným servisom, identickým s tým, ktorý používa náš konvertor farieb. Koherencia od konca po koniec, získate rovnaké hodnoty, ako keby ste napísali HEX kód v konvertore.

Typické prípady použitia

• Reprodukovať farbu screenshotu: máte screenshot stránky, chcete presne prevziať odtieň tlačidla alebo pozadia. Picker vám dá presný HEX kód na opätovné vloženie do vášho CSS.
• Identifikovať chartovú farbu na fotke: prezentačný PDF, stránka magazínu, produktový vizuál. Už netreba pýtať chartu, čítate farbu priamo.
• Reverse engineering vizuálnej identity: zachytiť presnú modrú loga, ružovú banneru, oranžovú call to action.
• Inšpirácia a design watch: vidíte fotku, ktorá sa vám páči, získate presný odtieň kvety, steny, plagátu.
• Front-end debug: screenshot bugu ukazuje nesprávnu farbu, čítate reálnu hodnotu pre porovnanie s tou očakávanou v makete.
• Vytvorenie palety z referencie: pickujete niekoľko bodov toho istého obrázka pre rekonštituciu vlastnej palety.

Ako používať color picker

1. Nahrajte váš obrázok (PNG, JPG, GIF, BMP, WebP, do 20 MB).
2. Náhľad sa zobrazí na stránke. Kliknite na pixel pre získanie jeho farby.
3. Zameriavač značí kliknutú pozíciu a vedľa sa objaví náhľad farby.
4. Potvrďte tlačidlom odoslania pre získanie finálneho renderu: farebný štvorec, HEX, RGB a HSL kódy.
5. Pre transformáciu hodnoty medzi formátmi prejdite cez náš konvertor farieb.

Často kladené otázky

Ukážka požiadavky

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

Vstupná schéma

tento nástroj očakáva súbor - použite Content-Type multipart/form-data namiesto application/json

Koncové body

• GET https://cdrn.fr/api/v1/tools - vypíše všetky dostupné nástroje
• GET https://cdrn.fr/api/v1/tools/color-picker - získa schému tohto nástroja
• POST https://cdrn.fr/api/v1/tools/color-picker/execute - spustí tento nástroj s JSON payloadom