இலவச படத்தின் நிறத் தொகுப்பு பிரித்தெடுப்பான்

இது எவ்வாறு செயல்படுகிறது

வண்ணப் பிரித்தெடுத்தல் Canvas API இலிருந்து படிக்கப்பட்ட மூல pixel தரவில் பயன்படுத்தப்படும் கையால் எழுதிய k-means++ clustering அல்காரிதம் மூலம் முழுவதும் உங்கள் உலாவியில் இயங்குகிறது — சர்வர் இல்லை, மூன்றாம் தரப்பு நூலகம் இல்லை. அல்காரிதம் Math.random அல்லாமல் தீர்மானமான pseudo-random number generator (mulberry32) ஐப் பயன்படுத்துவதால், அதே படமும் வண்ண எண்ணிக்கை அமைப்புகளும் எப்போதும் அதே palette ஐத் தரும்.

1. 1
   Canvas pixel தரவைப் படிக்கிறது

   படம் திரைக்கு வெளியே உள்ள HTML Canvas உறுப்பில் வரையப்பட்டு, நீளமான பக்கத்தில் அதிகபட்சம் 200px க்குக் குறைக்கப்படுகிறது. Canvas API இன் getImageData() ஒவ்வொரு pixel ஐயும் மூல RGBA bytes ஆகத் தருகிறது; முழுமையாக வெளிப்படையான pixels (alpha < 128) clustering தொடங்கும் முன் நீக்கப்படுகின்றன.
2. 2
   k-means++ pixels ஐக் குழுவாக்குகிறது

   k-means++ initializer centroids ஐத் தீர்மானமாக விதைக்கிறது, பின் அல்காரிதம் 20 முறை வரை iterate செய்கிறது: ஒவ்வொரு pixel உம் RGB வெளியில் அருகிலுள்ள centroid க்கு ஒதுக்கப்படுகிறது, பின் centroids ஒதுக்கப்பட்ட அனைத்து pixels இன் சராசரியாக மீண்டும் கணக்கிடப்படுகின்றன. ஒரே hex மதிப்புக்குச் சுருங்கும் clusters இணைக்கப்படுகின்றன; எனவே முடிவில் ஒவ்வொரு swatch உம் தனித்துவமானது.
3. 3
   ஒவ்வொரு நிறத்துக்குமான metadata கணக்கிடப்படுகிறது

   ஒவ்வொரு centroid உம் HEX, HSL மற்றும் மொத்த pixels இல் அதன் பங்காக (சதவீதம்) மாற்றப்படுகிறது. WCAG relative luminance நிலையான சூத்திரத்தின்படி கணக்கிடப்படுகிறது; கருப்பு, வெள்ளை இரண்டுக்கும் எதிரான மாறுபாட்டு விகிதங்கள் ஒவ்வொரு swatch உடனும் காட்டப்படுகின்றன.
4. 4
   ஏற்றுமதி மற்றும் eyedropper வெளியீடு

   palette ஐ CSS custom properties, SCSS variables, Tailwind config துணுக்கு அல்லது JSON ஆக நகலெடுக்கலாம். கிளிக்-செய்து-எடுக்கும் eyedropper முன்னோட்டத்தில் உங்கள் கிளிக்கை முழுத் தெளிவுத்திறன் canvas இல் சரியான மூல pixel ஆயங்களுக்குப் பொருத்தி, அந்த pixel இன் நிறத்தைத் தனி picked-colors பட்டியலில் சேர்க்கிறது. PNG palette பட்டையை Canvas toBlob() மூலம் பதிவிறக்கலாம்.

தொடர்புடைய கருவிகள்