Барандаи палитраи ранги тасвир-и ройгон

Чӣ тавр он кор мекунад

Ҷудосозии ранг пурра дар браузери шумо бо алгоритми кластерии k-means++ дастнависе, ки ба маълумоти хоми пиксели аз API-и Canvas хондашуда татбиқ мешавад, кор мекунад — на сервер, на китобхонаи тарафи сеюм. Ҳамон тасвир ва танзими шумораи ранг ҳамеша ҳамон палитраро тавлид мекунад, зеро алгоритм тавлидгари рақами тасодуфии псевдо-детерминистиро (mulberry32) истифода мебарад, на Math.random.

1. 1
   Canvas маълумоти пикселро мехонад

   Тасвир ба элементи Canvas-и HTML-и берун-аз-экран кашида ва то ҳадди аксар 200px дар тарафи дарозтарини худ поённамуна карда мешавад. getImageData()-и API-и Canvas ҳар пикселро ҳамчун байти хоми RGBA бармегардонад, ва пикселҳои пурра шаффоф (алфа < 128) пеш аз оғози кластербандӣ партофта мешаванд.
2. 2
   k-means++ пикселҳоро кластербандӣ мекунад

   Тавлидгари k-means++ маркази кластерро детерминистӣ мекорад, сипас алгоритм то 20 маротиба такрор мешавад: ҳар пиксел ба наздиктарин марказаш дар фазои RGB таъин карда мешавад, сипас марказҳо ҳамчун миёнаи ҳама пикселҳои таъиншуда аз нав ҳисоб карда мешаванд. Кластерҳое ки ба ҳамон қиммати шонздаҳӣ фурӯ мераванд, якҷоя карда мешаванд, бинобар ин ҳар намуна дар натиҷа беназир аст.
3. 3
   Метамаълумоти ҳар ранг ҳисоб карда мешавад

   Ҳар марказ ба HEX, HSL ва саҳмаш аз маҷмӯи пикселҳо (фоиз) табдил дода мешавад. Равшании нисбии WCAG мутобиқи формулаи стандартӣ ҳисоб карда мешавад, ва нисбатҳои контраст дар муқобили ҳарду сиёҳ ва сафед ҳамроҳи ҳар намуна нишон дода мешаванд.
4. 4
   Содирот ва натиҷаи eyedropper

   Палитраро метавон ҳамчун хусусиятҳои фармоишии CSS, тағйирёбандаҳои SCSS, порчаи танзими Tailwind ё JSON нусхабардорӣ кард. Eyedropper-и зер-барои-намуна зери-занди шуморо дар пешнамоиш ба координатаҳои дурусти пикселҳои манбаъ дар canvas-и қатъии пурра харита мекунад, ранги он пикселро ба рӯйхати алоҳидаи рангҳои интихобшуда илова мекунад. Навори палитраи PNG-ро метавон тавассути canvas.toBlob() боргирӣ кард.

Абзорҳои марбут