Պատկերի գույնի պաննո արդյունահանիչ անվճար

Ինչպես է այն աշխատում

Գույների արդյունահանումը լիովին աշխատում է ձեր դիտարկիչում՝ օգտագործելով ձեռագիր k-means++ կլաստերացման ալգորիթմ, կիրառված Canvas API-ից կարդացված հում պիքսելային տվյալների վրա — ոչ մի սերվեր, ոչ մի երրորդ կողմի գրադարան։ Նույն պատկերն ու գույների-քանակի կարգավորումները միշտ արտադրում են նույն գունապնակը, քանի որ ալգորիթմն օգտագործում է որոշիչ կեղծ-պատահական թվերի գեներատոր (mulberry32), ոչ թե Math.random։

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։ Սեղմել-նմուշառելու կաթիլաչափը ձեր սեղմումը նախադիտման վրա հետ քարտեզագրում է ամբողջ-լուծաչափով կտավի ճշգրիտ աղբյուրի պիքսելի կոորդինատներին, ավելացնելով այդ պիքսելի գույնը առանձին ընտրված-գույների ցանկում։ PNG գունապնակի շերտը կարող է ներբեռնվել Canvas toBlob()-ով։

Առնչվող գործիքներ