Акысыз Сүрөт түс палитрасын чыгаруучу

Бул кантип иштейт

Түс чыгаруу Canvas API'ден окулган чийки пиксел маалыматка колдонулган кол менен жазылган k-means++ кластерлөө алгоритмин колдонуп толугу менен браузериңизде болот — сервер жок, үчүнчү тараптын китепканасы жок. Ошол эле сүрөт жана түс-саны орнотуулары дайыма ошол эле палитраны берет, анткени алгоритм Math.random эмес, детерминдешкен псевдо-кокус сан генераторун (mulberry32) колдонот.

1. 1
   Canvas пиксел маалыматты окуйт

   Сүрөт экран-сыртындагы HTML Canvas элементине тартылат жана эң узун жагы боюнча 200пикселге чейин темирлештирилет. Canvas API'нин getImageData() ар бир пикселди чийки RGBA байттары катары кайтарат, толугу менен тунук пикселдер (альфа < 128) кластерлөө башталганга чейин четке кагылат.
2. 2
   k-means++ пикселдерди кластерлейт

   k-means++ баштапкылоочу центроидаларды детерминдешкен түрдө урук берет, андан кийин алгоритм 20 иретке чейин итерациялайт: ар бир пиксел RGB мейкиндигинде эң жакын центроидасына дайындалат, андан кийин центроидалар бардык дайындалган пикселдердин орточосу катары кайра эсептелет. Ошол эле он алтылык маанисине кулаган кластерлер бириктирилет, ошондуктан натыйжадагы ар бир үлгү уникалдуу.
3. 3
   Түс-башына метамаалымат эсептелет

   Ар бир центроида HEX, HSLге жана жалпы пикселдердин үлүшүнө (пайызга) айландырылат. WCAG салыштырмалуу жарыктык стандарттуу формула боюнча эсептелет, ак жана кара түскө каршы контраст катыштары ар бир үлгү менен катар көрсөтүлөт.
4. 4
   Экспорт жана пипетка чыгуусу

   Палитраны CSS ыңгайлаштырылган касиеттери, SCSS өзгөрмөлөрү, Tailwind конфигурация үзүндүсү же JSON катары көчүрсө болот. Бас-жана-үлгү-ал пипетка алдын ала көрүүдөгү басууну толук-чечилиштеги canvas'та так булак пиксел координаттарына картага түшүрөт, ошол пикселдин түсүн өзүнчө тандалган-түстөр тизмесине кошуп. PNG палитра тилкеси Canvas toBlob() аркылуу жүктөлүшү мүмкүн.

Байланыштуу куралдар