Bepul Rasm Rang Palitrasi Ajratuvchi

Qanday ishlaydi

Rang chiqarish Canvas API'dan o'qilgan xom piksel ma'lumotiga qo'llanilgan qo'lda yozilgan k-means++ klasterlash algoritmi yordamida to'liq brauzeringizda ishlaydi — server yo'q, uchinchi tomon kutubxonasi yo'q. Bir xil rasm va rang-soni sozlamalari har doim bir xil palitrani ishlab chiqaradi, chunki algoritm Math.random emas, deterministik psevdo-tasodifiy raqam generatoridan (mulberry32) foydalanadi.

1. 1
   Canvas piksel ma'lumotini o'qiydi

   Rasm ekrandan tashqari HTML Canvas elementiga chiziladi va eng uzun tomonida 200px gacha kichraytiriladi. Canvas API'ning getImageData() har bir pikselni xom RGBA baytlar sifatida qaytaradi, to'liq shaffof piksellar (alfa < 128) esa klasterlash boshlanishidan oldin tashlab yuboriladi.
2. 2
   k-means++ piksellarni klasterlaydi

   k-means++ boshlang'ich modul markazlarni deterministik ravishda urug'lantiradi, so'ng algoritm 20 martagacha takrorlanadi: har bir piksel RGB fazosida eng yaqin markaziga tayinlanadi, so'ng markazlar barcha tayinlangan piksellarning o'rtachasi sifatida qayta hisoblanadi. Bir xil olti burchakli qiymatga qulagan klasterlar birlashtiriladi, shuning uchun natijadagi har bir namuna noyob.
3. 3
   Har-rang metama'lumot hisoblanadi

   Har bir markaz OLTI BURCHAKLI, HSL va jami piksellardan ulushi (foiz) sifatida o'giriladi. WCAG nisbiy yorug'ligi standart formula bo'yicha hisoblanadi, har bir namuna yonida qora va oqga qarshi kontrast nisbatlari ko'rsatiladi.
4. 4
   Eksport va tomchi-tanlagich chiqishi

   Palitrani CSS maxsus xususiyatlari, SCSS o'zgaruvchilari, Tailwind konfiguratsiya bo'lagi yoki JSON sifatida nusxalash mumkin. Bosish-namuna-olish tomchi-tanlagichi ko'rib chiqishdagi bosishingizni to'liq-ruxsatli kanvasdagi aniq manba piksel koordinatalariga xaritalaydi, shu pikselning rangini alohida tanlangan-ranglar ro'yxatiga qo'shadi. PNG palitra chizig'ini Canvas toBlob() orqali yuklab olish mumkin.

Tegishli asboblar