CDRN

Kép pixelszínének rögzítése

  • Irányítópult
  • Dokumentáció
  • API
visszanyeri képének pontos pixelszínét (RGB, HSL, hexadecimális) a választott pontra kattintva

Mi az a kép-színválasztó?

A color picker (magyarul színválasztó vagy színpipetta) egy olyan eszköz, amely visszaadja egy képen kiválasztott pontos pixel értékét. Betölt egy fotót, rákattint az Önt érdeklő pontra, és az eszköz visszaadja a pontos színt HEX, RGB és HSL formátumban. Ez a webes megfelelője a tervezőszoftverek, például a Photoshop, a GIMP vagy a Figma pipettájának.

Eszközünk közvetlenül a böngészőben működik. Feltölti a képét, az megjelenik az oldalon, és csak rá kell kattintania egy pixelre a színének lekéréséhez. A pixel leolvasása az ügyféloldalon, a canvas API-n keresztül történik, szerver-visszaút, újratömörítés és a kép hálózaton keresztüli elküldése nélkül a kiválasztáshoz.

Különbség a színkinyerőhöz képest

A színkinyerőnk és a színválasztónk két különböző igényt elégít ki, amelyeket érdemes jól megkülönböztetni:

  • A kinyerő a teljes képet elemzi, és visszaadja a domináns palettát (az 5, 8 vagy 10 leginkább képviselt árnyalatot). Ez a választandó eszköz egy fotó színvilágának összefoglalásához, mood board készítéséhez vagy egy arculat táplálásához.
  • A színválasztó egy pontos pixel pontos színét adja vissza, amelyet Ön jelöl meg. Ez a választandó eszköz, ha tudja, hova kell néznie: egy logó egy képernyőfotón, egy színátmenet pontos árnyalata, egy referencia háttérkép.

A kinyerő pixelek millióin dolgozik, és klaszterezést alkalmaz a színcsoportok kiemelésére; a választó pedig egyszerűen beolvassa a kattintott pozícióban tárolt RGB értéket. Az első általánosít, a második sebészi pontosságú.

Hogyan működik technikailag

A digitális kép pixelek rácsa, minden pixel három RGB csatornát (vörös, zöld, kék) hordoz, általában 8 biten kódolva, ami csatornánként 256 értéket jelent. Amikor rákattint egy pontra, az eszköz:

  1. Kirajzolja a képét egy canvas elembe, megőrizve az eredeti méreteit (a képernyőn való kényelmes megjelenítés érdekében 1500 pixel szélességi plafonnal).
  2. A kattintás pozícióját eredeti képkoordinátákká alakítja, kompenzálva a böngésző megjelenítési átméretezését.
  3. Beolvassa a pixel RGBA értékét a canvas.getContext('2d').getImageData(x, y, 1, 1) API-n keresztül.
  4. Megjeleníti a választott szín előnézetét. A beküldéskor a szerver a PHP GD segítségével ugyanazt a pozíciót olvassa be, és kiszámítja a végleges HEX, RGB és HSL kódokat.

A HSL értéket a színkonverziós szolgáltatásunk számítja ki, ugyanaz, amelyet a színkonverterünk is használ. Teljes körű következetesség: ugyanazokat az értékeket kapja, mintha a HEX kódot írta volna be a konverterbe.

Tipikus felhasználási esetek

  • Képernyőfotó színének reprodukálása: van egy képernyőfotója egy oldalról, és pontosan át szeretné venni egy gomb vagy egy háttér árnyalatát. A választó megadja a pontos HEX kódot, amelyet beilleszthet a CSS-ébe.
  • Arculati szín azonosítása egy fotón: egy prezentációs PDF, egy magazinoldal, egy termékvizuál. Már nem kell kérnie az arculati kézikönyvet, közvetlenül leolvashatja a színt.
  • Vizuális identitás visszafejtése: egy logó pontos kékjének, egy banner rózsaszínének vagy egy felhívás (CTA) narancssárgájának rögzítése.
  • Inspiráció és designfigyelés: lát egy fotót, ami tetszik, és lekéri egy virág, egy fal vagy egy plakát pontos árnyalatát.
  • Front-end hibakeresés: egy hiba-képernyőfotó helytelen színt mutat, Ön leolvassa a valós értéket, hogy összehasonlítsa a makettben várttal.
  • Paletta létrehozása egy referenciából: ugyanazon kép több pontját választja ki egy egyéni paletta összeállításához.

Hogyan használjuk a színválasztót

  1. Töltse fel a képét (PNG, JPG, GIF, BMP, WebP, 20 MB-ig).
  2. Egy előnézet jelenik meg az oldalon. Kattintson egy pixelre a színének lekéréséhez.
  3. Egy célkereszt jelöli a kattintott pozíciót, és a szín előnézete megjelenik mellette.
  4. Hagyja jóvá a beküldés gombbal a végleges eredmény eléréséhez: színes négyzet, HEX, RGB és HSL kód.
  5. A formátumok közötti átalakításhoz használja színkonverterünket.

Gyakran ismételt kérdések

Mi a különbség a HEX, az RGB és a HSL között?

Ez ugyanannak a színnek három ábrázolása. A HEX (#ff0000) a CSS-ben leggyakrabban használt formátum. Az RGB a három vörös / zöld / kék csatornát fejezi ki 0-255 közötti értékekkel. A HSL (Hue, Saturation, Lightness - Árnyalat, Telítettség, Világosság) intuitívabb egy árnyalat beállításához: ezt a formátumot érdemes előnyben részesíteni, ha sötétíteni, telítetlenebbé tenni vagy módosítani szeretne egy színt az alapszín megváltoztatása nélkül.

Miért nem pontosan a várt színt adja vissza a kattintásom?

Egy színátmenetes területen két szomszédos pixelnek nagyon eltérő értéke lehet. Ezenkívül a JPG képek veszteségesen tömörítettek: egy pixel színe kissé eltérhet az eredetitől. A megbízható színkódok érdekében részesítse előnyben a PNG-ket vagy a nem újratömörített képeket.

A koordináták a képernyőre vagy a képre vonatkoznak?

Az eredeti képre. JavaScript szkriptünk automatikusan konvertálja a kattintás pozícióját (képernyőpixelben) az eredeti kép pozíciójává. Ha a képe 4000x3000-es, és 800x600-ban jelenik meg, egy középre tett kattintás (2000, 1500) értéket ad vissza, nem pedig (400, 300)-at.

Működik a választó átlátszó képekkel?

Igen. Ha egy átlátszó pixelre kattint, az ott tárolt RGB színt kapja vissza (gyakran fehéret vagy feketét az eredeti szerkesztőtől függően). Maga az átlátszóság (alfa csatorna) nem kerül visszaadásra az eredményben; egy alfa csatorna elemzéséhez nyissa meg a képet egy grafikai szerkesztőben.

Mekkora képméret elfogadott?

Legfeljebb 20 MB, PNG, JPG, GIF, BMP és WebP formátumokban. A nagyon nagy képek legfeljebb 1500 pixel szélességben jelennek meg, hogy kényelmesek maradjanak a képernyőn, de a leolvasott szín az eredeti pixelé marad, újramintavételezés nélkül.

Tárolódnak a képeim a szerveren?

Nem. A kiválasztás a böngészőjében történik. A beküldés pillanatában a fájlt menet közben dolgozzuk fel a kért pixel színének megerősítéséhez, majd az ideiglenes fájlt töröljük. Semmilyen kép nem marad meg, kerül indexelésre vagy megosztásra.

Mi történik, ha a JavaScript le van tiltva?

Az űrlap klasszikus beküldése továbbra is lehetséges. Az x és y koordinátákat rejtett mezők kezelik, amelyeket a JavaScript tölt ki kattintáskor. JavaScript nélkül ezek a mezők üresek maradnak, és az űrlap jelezni fogja, hogy hiányzik egy pozíció, de maga a kép eljut a szerverhez feldolgozásra.

Kérés példa

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

Bemeneti séma

Mező Típus Kötelező Alapértelmezett
image file ✓ –
x string – –
y string – –

ez az eszköz fájlt vár - használjon Content-Type multipart/form-data értéket application/json helyett

Végpontok

  • GET https://cdrn.fr/api/v1/tools - listázza az összes elérhető eszközt
  • GET https://cdrn.fr/api/v1/tools/color-picker - lekéri ezen eszköz sémáját
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - végrehajtja ezen eszközt JSON payloaddal