නොමිලේ රූප වර්ණ Palette Extractor

එය ක්‍රියා කරන්නේ කෙසේද

වර්ණ extraction Canvas API එකෙන් කියවූ raw pixel දත්තවලට යොදන ලද අතින් ලියන ලද k-means++ clustering ඇල්ගොරිතමයක් භාවිතයෙන් සම්පූර්ණයෙන්ම ඔබේ බ්‍රවුසරයේ ක්‍රියාත්මක වේ — සර්වරයක්, third-party පුස්තකාලයක් නැත. එකම image සහ color-count සැකසුම් සැමවිටම එකම palette එකක් නිපදවන්නේ ඇල්ගොරිතමය Math.random වෙනුවට deterministic pseudo-random number generator (mulberry32) එකක් භාවිතා කරන නිසාය.

1. 1
   Canvas pixel දත්ත කියවයි

   රූපය off-screen HTML Canvas element එකකට අඳින අතර, එහි දිගම පැත්තෙන් px 200ට downsample කෙරේ. Canvas API ගේ getImageData() සෑම pixel එකක්ම raw RGBA bytes ලෙස ලබා දෙන අතර, clustering ආරම්භ වීමට පෙර සම්පූර්ණයෙන්ම විනිවිද පෙනෙන pixels (alpha < 128) ඉවත් කෙරේ.
2. 2
   k-means++ pixels clusters කරයි

   k-means++ initializer එකක් centroids deterministically seed කර, පසුව ඇල්ගොරිතමය 20 වතාවක් දක්වා iterate වේ: සෑම pixel එකක්ම RGB space එකේ එහි ආසන්නතම centroid එකට allocate කෙරෙන අතර, පසුව centroids allocate කළ සියලුම pixels වල mean එක ලෙස නැවත ගණනය කෙරේ. එකම hex අගයට collapse වන clusters merge කෙරෙන නිසා, ප්‍රතිඵලයේ එක් එක් swatch එක අද්විතීයයි.
3. 3
   Per-color metadata ගණනය කෙරේ

   එක් එක් centroid HEX, HSL, සහ මුළු pixels වලින් එහි කොටස (ප්‍රතිශතයක්) ලෙස පරිවර්තනය කෙරේ. WCAG relative luminance සම්මත සූත්‍රය අනුව ගණනය කර, කළු සහ සුදු දෙකටම එරෙහි contrast අනුපාත සෑම swatch එකක්ම සමඟ පෙන්වයි.
4. 4
   නිර්යාතය සහ eyedropper ප්‍රතිදානය

   Palette එක CSS custom properties, SCSS variables, Tailwind config snippet එකක්, හෝ JSON ලෙස පිටපත් කළ හැක. click-to-sample eyedropper එකක් preview එකේ ඔබේ click එක full-resolution canvas එකක නිශ්චිත source pixel coordinates වෙත සිතියම් ගත කර, එම pixel එකේ වර්ණය වෙනම picked-colors ලැයිස්තුවකට එකතු කරයි. Canvas toBlob() හරහා PNG palette strip එකක් බාගත කළ හැක.

සම්බන්ධ මෙවලම්