Notvert attēla pikseļa krāsu

Kas ir attēla krāsu atlasītājs?

krāsu atlasītājs (franču valodā krāsu pipete vai krāsu uztveršana) ir rīks, kas atjauno attēla izvēlētā pikseļa precīzu vērtību. Jūs augšupielādējat fotoattēlu, jūs noklikšķiniet uz jūs interesējošā punkta, un rīks atgriež precīzu krāsu HEX, RGB un HSL formātā. Tas ir tīmekļa pilinātāja ekvivalents projektēšanas programmatūrā, piemēram, Photoshop, GIMP vai Figma.

Mūsu rīks darbojas tieši jūsu pārlūkprogrammā. Jūs augšupielādējat savu attēlu, tas tiek parādīts lapā, un jums vienkārši jānoklikšķina uz pikseļa, lai izgūtu tā krāsu. Pikseļa lasīšana tiek darīts klienta pusē, izmantojot audekla API, bez servera turp un atpakaļ, bez atkārtotas saspiešanas un bez nosūtīšanas attēlu tīklā atlasei.

Atšķirība ar krāsu nosūcēju

Mūsu krāsu nosūcējs un mūsu krāsu atlasītājs atbild uz diviem atšķirīgas vajadzības, kuras ir lietderīgi skaidri nošķirt:

• Izvilkējs analizē visu attēlu un atgriež dominējošo paleti (5, 8 vai 10 visvairāk pārstāvētie toņi). Tas ir izvēles instruments atmosfēras sintezēšanai fotoattēla kolorimetrisks, izveidojiet noskaņojuma tabulu vai barojiet hartu.
• Krāsu atlasītājs atgriež precīzu konkrēta pikseļa krāsu, ko jūs iecelt. Tas ir izvēles rīks, kad zināt, kur meklēt: logotips tverā, nianse precīzs gradients, atsauces fons.

Ekstraktors strādā ar miljoniem pikseļu un izmanto klasterizāciju, lai izceltu grupas krāsas; atlasītājs vienkārši nolasa RGB vērtību, kas saglabāta vietā, kurā noklikšķināt. The pirmais vispārina, otrais ir ķirurģisks.

Kā tas darbojas, tehniski

Digitālais attēls ir pikseļu režģis, katram pikselim ir trīs RGB kanāli (sarkans, zaļš, zils) parasti kodēti uz 8 bitiem jeb 256 vērtībām katrā kanālā. Noklikšķinot uz punkta, rīks:

1. Zīmē jūsu attēlu audekla elementā, saglabājot tā sākotnējos izmērus (ar griestiem 1500 pikseļu platums, lai ekrānā būtu ērti).
2. Klikšķa pozīciju pārvērš vietējās attēla koordinātēs, kompensējot izmēru maiņu pārlūkprogrammas displejs.
3. Nolasa pikseļa RGBA vērtību, izmantojot API canvas.getContext('2d').getImageData(x, y, 1, 1).
4. Rāda krāsu atlasītāja priekšskatījumu. Iesniedzot, serveris nolasa to pašu pozīciju ar PHP GD un aprēķina galīgos HEX, RGB un HSL kodus.

HSL vērtību aprēķina mūsu krāsu konvertēšanas pakalpojums, tas pats, ko izmanto mūsu krāsu pārveidotājs. Jūs saņemat pilnīgu konsekvenci tādas pašas vērtības kā tad, ja pārveidotājā būtu ievadījis HEX kodu.

Tipiski lietošanas gadījumi

• Atveidojiet ekrānuzņēmuma krāsu: jums ir vietnes ekrānuzņēmums, jūs vēlaties precīzi saskaņot pogas vai fona krāsu. Paņēmējs dod jums HEX kodu precīzi ielīmēt savā CSS.
• Identificējiet diagrammas krāsu fotoattēlā: prezentācijas PDF fails, lapa no žurnāls, produkta vizuālais materiāls. Diagramma vairs nav jāprasa, krāsu lasiet tieši.
• Vizuālās identitātes reversā inženierija: precīza logotipa zilā krāsa, rozā, tveršana reklāmkaroga, oranžā krāsā – aicinājums uz darbību.
• Iedvesmas un dizaina pārraudzība: redzat fotoattēlu, kas jums patīk, jūs to iegūstat precīzs zieda, sienas, plakāta tonis.
• Atkļūdošanas priekšgals: kļūdas ekrānuzņēmumā ir redzama nepareiza krāsa, jūs lasāt faktiskā vērtība, kas jāsalīdzina ar modelī paredzēto.
• Paletes izveide no atsauces: jūs izvēlaties vairākus punktus no a to pašu attēlu, lai atjaunotu personalizētu paleti.

Kā lietot krāsu atlasītāju

1. Augšupielādējiet savu attēlu (PNG, JPG, GIF, BMP, WebP, līdz 20 MB).
2. Lapā tiek parādīts priekšskatījums. Noklikšķiniet uz pikseļa, lai izgūtu tā krāsu.
3. Skatu meklētājs atzīmē noklikšķināšanas vietu, un blakus tiek parādīts krāsas priekšskatījums.
4. Apstipriniet, izmantojot pogu Iesniegt, lai iegūtu gala rezultātu: krāsains kvadrāts, HEX, RGB un HSL kods.
5. Lai pārveidotu vērtību starp formātiem, izmantojiet mūsu krāsu pārveidotājs.

Bieži uzdotie jautājumi

Pieprasījuma piemērs

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

Ievades shēma

šis rīks sagaida failu - izmantojiet Content-Type multipart/form-data application/json vietā

Endpoint

• GET https://cdrn.fr/api/v1/tools - uzskaita visus pieejamos rīkus
• GET https://cdrn.fr/api/v1/tools/color-picker - iegūst šī rīka shēmu
• POST https://cdrn.fr/api/v1/tools/color-picker/execute - izpilda šo rīku ar JSON payload