Olùyọ Àwọ̀-Àkójọpọ̀ Àwòrán Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Ìyọkúrò àwọ̀ ń ṣiṣẹ́ pátápátá nínú aṣàwákiri rẹ pẹ̀lú algorithm ìkójọpọ̀ k-means++ tí a fi ọwọ́ kọ tí a fi sílo sí dátà pixel gan-an tí a ka láti API Canvas — kò sí sáfà, kò sí ìwé-ìṣirò ẹnì kẹta. Àwòrán àti ìtò iye-àwọ̀ kan náà ń mú àwò̩n-àwọ̀ kan náà jáde nígbà gbogbo nítorí algorithm náà ń lo olùmújáde nọ́mbà tí a yàn láìròtẹ́lẹ̀ tí ó dájú (mulberry32) dípò Math.random.

1. 1
   Canvas ń ka dátà pixel

   A ń yà àwòrán náà sórí ẹ̀yà HTML Canvas lóde-ìfihàn tí a sì ń dín kù sí títí dé 200px lórí ìhà tí ó gùn jùlọ. getImageData() ti API Canvas ń dá pixel kọ̀ọ̀kan padà gẹ́gẹ́ bí byte RGBA gan-an, àwọn pixel tí kò rí (alpha < 128) ni a sì fi sílẹ̀ kí ìkójọpọ̀ tó bẹ̀rẹ̀.
2. 2
   k-means++ ń kó àwọn pixel jọ

   Olùbẹ̀rẹ̀ k-means++ kan ń gbìn àwọn centroid dájú, algorithm náà sì ń tún ṣe títí dé 20 ìgbà: pixel kọ̀ọ̀kan ni a fi sí centroid tí ó súnmọ́ jùlọ ní àyè RGB, kí a sì tún ṣírò àwọn centroid gẹ́gẹ́ bí ìwọ̀n àpapọ̀ ti gbogbo pixel tí a fi sí wọn. Àwọn ìkójọpọ̀ tí ó dá sí iye hex kan náà ni a dàpọ̀, nítorí náà swatch kọ̀ọ̀kan nínú àbájáde jẹ́ ọ̀tọ̀ọ̀tọ̀.
3. 3
   A ṣírò dátà àwọ̀ kọ̀ọ̀kan

   A ń yí centroid kọ̀ọ̀kan padà sí HEX, HSL, àti ìpín rẹ̀ ti gbogbo pixel (ìdámẹ́wàá). A ń ṣírò luminance ìbátan WCAG gẹ́gẹ́ bí fọ́rmúlà déédéé, a sì ń fi àwọn ìdíwọ̀n ìyàtọ̀ lòdì sí dúdú àti funfun méjèèjì hàn lẹ́gbẹ̀ẹ́ swatch kọ̀ọ̀kan.
4. 4
   Ìtọjade àti ìtọjade eyedropper

   A lè dàkọ àwò̩n-àwọ̀ náà gẹ́gẹ́ bí ohun-ìní àkànṣe CSS, àwọn ìtọ́ka SCSS, apá ìtò Tailwind, tàbí JSON. Eyedropper kan tí ó ń tẹ̀-láti-mú ń fi ìtẹ̀ rẹ lórí àkíyèsí náà padà sí àwọn ìdí pixel orísun gan-an lórí canvas ìdájú-pípé kan, tí ó ń fi àwọ̀ pixel yẹn kún àtòjọ àwọ̀-tí-a-mú ọ̀tọ̀. A lè gba ìlà àwò̩n-àwọ̀ PNG kan nípasẹ̀ Canvas toBlob().

Àwọn Irinṣẹ Tó Jọra