အခမဲ့ ပုံအရောင်ပါလက်ထုတ်ယူစက်

မည်သို့ အလုပ်လုပ်သည်

Color extraction သည် Canvas API မှ ဖတ်ယူထားသော raw pixel data ပေါ်တွင် အသုံးချထားသော ကိုယ်တိုင်ရေးထားသော k-means++ clustering algorithm ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည် — server၊ ပြင်ပ library မပါဝင်ပါ။ ပုံနှင့် color-count setting တူတူသည် ရလဒ် palette တူတူကို အမြဲ ထုတ်ပေးသည်၊ algorithm သည် Math.random အစား သတ်သတ်မှတ်မှတ် pseudo-random number generator (mulberry32) ကို သုံးထားသောကြောင့်ဖြစ်သည်။

1. 1
   Canvas သည် pixel data ကို ဖတ်ယူသည်

   ပုံကို off-screen HTML Canvas element ပေါ်တွင် ဆွဲပြီး ၎င်း၏ ရှည်ဆုံးဘက်တွင် အများဆုံး 200px သို့ downsample လုပ်သည်။ Canvas API ၏ getImageData() သည် pixel တိုင်းကို raw RGBA byte များအဖြစ် ပြန်ပေးပြီး clustering မတိုင်မီ လုံးဝ ပွင့်လင်းသော pixel များ (alpha < 128) ကို ချန်ထားသည်။
2. 2
   k-means++ သည် pixel များကို cluster ဖွဲ့သည်

   k-means++ initializer တစ်ခုသည် centroid များကို သတ်သတ်မှတ်မှတ် seed ချသည်၊ ထို့နောက် algorithm သည် 20 ကြိမ်အထိ iterate လုပ်သည်: pixel တစ်ခုစီကို RGB space ၌ ၎င်းနှင့် အနီးဆုံး centroid သို့ assign လုပ်ပြီး centroid များကို assign လုပ်ထားသော pixel အားလုံး၏ ပျမ်းမျှအဖြစ် ပြန်တွက်ချက်သည်။ Hex တန်ဖိုးတူညီသို့ ကျဆုံးသွားသော cluster များကို ပေါင်းစည်းသဖြင့် ရလဒ်ရှိ swatch တစ်ခုစီသည် ထူးခြားသည်။
3. 3
   အရောင်တစ်ခုစီ၏ metadata ကို တွက်ချက်ထားသည်

   Centroid တစ်ခုစီကို HEX၊ HSL နှင့် pixel စုစုပေါင်းရှိ ၎င်း၏ ရာခိုင်နှုန်းသို့ ပြောင်းလဲထားသည်။ WCAG relative luminance ကို standard ဖော်မြူလာအရ တွက်ချက်ပြီး အမည်းရောင်နှင့် အဖြူရောင် နှစ်မျိုးစလုံးနှင့် contrast ratio များကို swatch တစ်ခုစီနှင့်အတူ ပြသသည်။
4. 4
   Export နှင့် eyedropper output

   Palette ကို CSS custom property များ၊ SCSS variable များ၊ Tailwind config snippet သို့မဟုတ် JSON အဖြစ် ကူးယူနိုင်သည်။ Click-to-sample eyedropper တစ်ခုသည် ကြိုကြားမှုပေါ်ရှိ သင့် click ကို full-resolution canvas ပေါ်ရှိ အတိအကျ source pixel coordinate များသို့ map ပြန်ကာ ထို pixel အရောင်ကို သီးခြား picked-colors list တစ်ခုသို့ ထည့်သည်။ PNG palette strip တစ်ခုကို Canvas toBlob() မှတစ်ဆင့် ဒေါင်းလုဒ်ဆွဲနိုင်သည်။

ဆက်နွှယ်သော ကိရိယာများ