Nxjerrës Palete Ngjyrash nga Imazhi Falas

Si funksionon

Nxjerrja e ngjyrave funksionon tërësisht në shfletuesin tënd duke përdorur një algoritëm grupimi k-means++ të shkruar me dorë të zbatuar mbi të dhëna piksel të papërpunuara të lexuara nga API-ja Canvas — pa server, pa bibliotekë të palës së tretë. I njëjti imazh dhe cilësime numri ngjyrash prodhojnë gjithmonë të njëjtën paletë sepse algoritmi përdor një gjenerues numrash pseudo-të-rastësishëm deterministik (mulberry32) në vend të Math.random.

1. 1
   Canvas lexon të dhëna pikselësh

   Imazhi vizatohet mbi një element HTML Canvas jashtë-ekranit dhe ripërmasazohet në më së shumti 200px në anën e tij më të gjatë. getImageData() e API-së Canvas kthen çdo piksel si bajte të papërpunuar RGBA, dhe pikselët plotësisht transparentë (alfa < 128) hidhen poshtë para se të fillojë grupimi.
2. 2
   k-means++ i grupon pikselët

   Një inicializues k-means++ mbjell centroidet në mënyrë deterministike, pastaj algoritmi përsëritet deri në 20 herë: çdo piksel caktohet te centroidi i tij më i afërt në hapësirën RGB, pastaj centroidet rillogariten si mesatarja e të gjithë pikselëve të caktuar. Grupet që bien te e njëjta vlerë heksadecimale bashkohen, kështu që çdo mostër në rezultat është unike.
3. 3
   Metadata për çdo ngjyrë llogaritet

   Çdo centroid konvertohet në HEX, HSL, dhe pjesën e tij nga totali i pikselëve (përqindje). Ndriçimi relativ WCAG llogaritet sipas formulës standarde, dhe raportet e kontrastit kundrejt të zezës dhe të bardhës shfaqen krahas çdo mostre.
4. 4
   Eksport dhe dalje eyedropper

   Paleta mund të kopjohet si veti të personalizuara CSS, variabla SCSS, një fragment konfigurimi Tailwind, ose JSON. Një eyedropper me klikim-për-mostër harton klikimin tënd mbi parashikimin përsëri te koordinatat e sakta të pikselit burim mbi një canvas me rezolucion të plotë, duke shtuar ngjyrën e atij pikseli te një listë e veçantë ngjyrash të zgjedhura. Një shirit palete PNG mund të shkarkohet përmes Canvas toBlob().

Mjete të ngjashme