Kyauta Mai Fitar da Palette na Launi daga Hoto

Yadda Yake Aiki

Cire launi yana gudana gaba ɗaya a burauzarka ta amfani da algorithm na haɗuwar k-means++ da aka rubuta da hannu da aka yi amfani da shi ga bayanan pixel danye da aka karanta daga Canvas API — babu uwar garke, babu ɗakin karatu na bangare na uku. Iri ɗayan hoto da saitunan yawan launi koyaushe suna samar da iri ɗayan palette saboda algorithm yana amfani da mai samar da lamba bazuwar tabbatacce (mulberry32) maimakon Math.random.

1. 1
   Canvas yana karanta bayanan pixel

   Ana zana hoton zuwa wani abu na HTML Canvas a wajen allo kuma ana rage shi zuwa mafi ƙaranci 200px a gefensa mafi tsawo. getImageData() na Canvas API yana mayar da kowane pixel a matsayin bytes na RGBA danye, kuma ana zubar da pixels masu bayyane gaba ɗaya (alpha < 128) kafin haɗuwa ya fara.
2. 2
   k-means++ yana haɗa pixels

   Wani initializer na k-means++ yana shuka centroids tabbatacce, sannan algorithm yana maimaitawa har zuwa sau 20: ana ba kowane pixel ga centroid ɗinsa mafi kusa a sararin RGB, sannan ana sake lissafta centroids a matsayin matsakaicin duk pixels da aka bayar. Ana haɗa clusters da suke rushewa zuwa iri ɗayan ƙimar hex, don haka kowace samfur a cikin sakamakon yana na musamman.
3. 3
   Ana lissafta bayanan kowace launi

   Ana canja kowane centroid zuwa HEX, HSL, da rabonsa na jimlar pixels (kaso). Ana lissafta haske na dangi na WCAG bisa ka'idar al'ada, kuma ana nuna rabon bambanci da baki da fari kusa da kowace samfur.
4. 4
   Fitar da shi da fitarwar eyedropper

   Za a iya kwafi palette a matsayin dukiyoyin CSS na musamman, masu canji na SCSS, wani guntu na saitin Tailwind, ko JSON. Wani eyedropper na dannawa-don-samfur yana mayar da dannawarka a kan dubawa baya zuwa daidai daidaitar pixel na tushen a kan canvas na cikakken-ƙuduri, yana ƙara launin wannan pixel zuwa jerin launuka da aka zaɓa daban. Za a iya sauke tsagi na palette na PNG ta Canvas toBlob().

Kayan Aiki Masu Alaƙa