സൗജന്യ ചിത്രം കളർ പാലറ്റ് എക്‌സ്ട്രാക്ടർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

Canvas API-യിൽ നിന്ന് വായിക്കുന്ന അസംസ്കൃത പിക്സൽ ഡാറ്റയിൽ പ്രയോഗിക്കുന്ന ഒരു കൈകൊണ്ട് എഴുതിയ k-means++ ക്ലസ്റ്ററിംഗ് അൽഗോരിതം ഉപയോഗിച്ച് നിറ extraction പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — സെർവറില്ല, മൂന്നാം കക്ഷി ലൈബ്രറിയില്ല. അൽഗോരിതം Math.random-ന് പകരം ഒരു നിർണ്ണായക pseudo-random നമ്പർ ജനറേറ്റർ (mulberry32) ഉപയോഗിക്കുന്നതിനാൽ അതേ ചിത്രവും നിറ-കൗണ്ട് സെറ്റിംഗ്സും എപ്പോഴും അതേ പാലറ്റ് നിർമ്മിക്കുന്നു.

1. 1
   Canvas പിക്സൽ ഡാറ്റ വായിക്കുന്നു

   ചിത്രം ഒരു ഓഫ്-സ്ക്രീൻ HTML Canvas എലമെന്റിലേക്ക് വരയ്ക്കുകയും അതിന്റെ ഏറ്റവും നീളമുള്ള വശത്ത് പരമാവധി 200px ആയി ഡൗൺസാമ്പിൾ ചെയ്യുകയും ചെയ്യുന്നു. Canvas API-യുടെ getImageData() ഓരോ പിക്സലും അസംസ്കൃത RGBA ബൈറ്റുകളായി നൽകുന്നു, പൂർണ്ണമായും സുതാര്യമായ പിക്സലുകൾ (alpha < 128) ക്ലസ്റ്ററിംഗ് ആരംഭിക്കുന്നതിന് മുമ്പ് ഒഴിവാക്കപ്പെടുന്നു.
2. 2
   k-means++ പിക്സലുകൾ ക്ലസ്റ്റർ ചെയ്യുന്നു

   ഒരു k-means++ ഇനിഷ്യലൈസർ centroids-നെ നിർണ്ണായകമായി സീഡ് ചെയ്യുന്നു, പിന്നെ അൽഗോരിതം 20 തവണ വരെ ഇറ്ററേറ്റ് ചെയ്യുന്നു: ഓരോ പിക്സലും RGB സ്പേസിൽ അതിന്റെ ഏറ്റവും അടുത്ത centroid-ലേക്ക് അസൈൻ ചെയ്യപ്പെടുന്നു, പിന്നെ centroids എല്ലാ അസൈൻ ചെയ്ത പിക്സലുകളുടെയും ശരാശരിയായി വീണ്ടും കണക്കാക്കുന്നു. ഒരേ ഹെക്സ് മൂല്യത്തിലേക്ക് ചുരുങ്ങുന്ന ക്ലസ്റ്ററുകൾ ലയിപ്പിക്കുന്നു, അതിനാൽ ഫലത്തിലെ ഓരോ സ്വാച്ചും അതുല്യമാണ്.
3. 3
   ഓരോ-നിറ മെറ്റാഡാറ്റ കണക്കാക്കിയിരിക്കുന്നു

   ഓരോ centroid-ഉം HEX, HSL, ആകെ പിക്സലുകളിലുള്ള അതിന്റെ പങ്ക് (ശതമാനം) ആയി മാറ്റുന്നു. സ്റ്റാൻഡേർഡ് സൂത്രവാക്യം പ്രകാരം WCAG ആപേക്ഷിക luminance കണക്കാക്കുന്നു, കറുപ്പിനും വെളുപ്പിനും എതിരായ കോൺട്രാസ്റ്റ് അനുപാതങ്ങൾ ഓരോ സ്വാച്ചിനൊപ്പവും കാണിക്കുന്നു.
4. 4
   എക്സ്പോർട്ടും ഐഡ്രോപ്പർ ഔട്ട്പുട്ടും

   പാലറ്റ് CSS കസ്റ്റം പ്രോപ്പർട്ടികളായോ SCSS വേരിയബിളുകളായോ ഒരു Tailwind കോൺഫിഗ് സ്നിപ്പെറ്റായോ JSON ആയോ പകർത്താം. ഒരു ക്ലിക്ക്-ടു-സാമ്പിൾ ഐഡ്രോപ്പർ പ്രിവ്യൂവിലെ നിങ്ങളുടെ ക്ലിക്ക് ഒരു പൂർണ്ണ-റെസൊല്യൂഷൻ കാൻവാസിലെ കൃത്യമായ സോഴ്സ് പിക്സൽ കോർഡിനേറ്റുകളിലേക്ക് മാപ്പ് ചെയ്യുന്നു, ആ പിക്സലിന്റെ നിറം ഒരു പ്രത്യേക picked-colors ലിസ്റ്റിലേക്ക് ചേർക്കുന്നു. Canvas toBlob() വഴി ഒരു PNG പാലറ്റ് സ്ട്രിപ്പ് ഡൗൺലോഡ് ചെയ്യാം.

അനുബന്ധ ടൂളുകൾ