სურათის ფერის პალიტრის ამომღები უფასოდ

როგორ მუშაობს

ფერის ამოღება მთლიანად თქვენს ბრაუზერში მუშაობს, ხელით დაწერილი k-means++ კლასტერირების ალგორითმის გამოყენებით, Canvas API-დან წაკითხულ დაუმუშავებელ პიქსელურ მონაცემებზე გამოყენებული — სერვერის, მესამე-მხარის ბიბლიოთეკის გარეშე. იგივე სურათი და ფერის-რაოდენობის პარამეტრები ყოველთვის იძლევა იმავე პალიტრას, რადგან ალგორითმი დეტერმინისტულ ფსევდო-შემთხვევით რიცხვის გენერატორს (mulberry32) იყენებს, Math.random-ის ნაცვლად.

1. 1
   Canvas კითხულობს პიქსელურ მონაცემებს

   სურათი ილუწება ეკრანს-მიღმა HTML Canvas ელემენტზე და მისი გრძელი მხარე მცირდება მაქსიმუმ 200px-მდე. 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()-ის მეშვეობით.

დაკავშირებული ინსტრუმენტები