ស្រង់ចំណង់ពណ៌ពីរូបភាព ឥតគិតថ្លៃ

វាដំណើរការដោយរបៀបណា

ការទាញយកពណ៌ដំណើរការទាំងស្រុងនៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើក្បួនដោះស្រាយ k-means++ សរសេរដោយដៃអនុវត្តទៅទិន្នន័យ pixel ដើមអានពី Canvas API — គ្មានម៉ាស៊ីនមេ គ្មានបណ្ណាល័យតតិយភាគីទេ។ ការកំណត់រូបភាព និងចំនួនពណ៌ដូចគ្នាតែងតែផលិតក្រុមពណ៌ដូចគ្នា ព្រោះក្បួនដោះស្រាយប្រើម៉ាស៊ីនបង្កើតលេខ pseudo-random ច្បាស់លាស់ (mulberry32) ជំនួសឱ្យ Math.random។

1. 1
   Canvas អានទិន្នន័យ pixel

   រូបភាពត្រូវបានគូរលើធាតុ HTML Canvas ក្រៅអេក្រង់ និងបានបន្ថយគំរូទៅភាគច្រើនបំផុត 200px នៅចំហៀងវែងបំផុតរបស់វា។ getImageData() របស់ Canvas API ត្រឡប់ pixel នីមួយៗជា byte RGBA ដើម ហើយ pixel ថ្លាពេញលេញ (alpha < 128) ត្រូវបានបោះបង់មុននឹងក្រុមចាប់ផ្តើម។
2. 2
   k-means++ ក្រុម pixels

   ការចាប់ផ្តើម k-means++ ដាំគ្រាប់ centroids ច្បាស់លាស់ រួចក្បួនដោះស្រាយធ្វើដដែលៗរហូតដល់ 20 ដង៖ pixel នីមួយៗត្រូវបានកំណត់ទៅ centroid ជិតបំផុតរបស់វាក្នុងលំហ RGB រួច centroids ត្រូវបានគណនាឡើងវិញជាមធ្យមនៃ pixel ដែលបានកំណត់ទាំងអស់។ ក្រុមដែលដួលទៅតម្លៃ hex ដូចគ្នាត្រូវបានបញ្ចូលគ្នា ដូច្នេះ swatch នីមួយៗនៅក្នុងលទ្ធផលមានតែមួយ។
3. 3
   ទិន្នន័យមេតាក្នុងមួយពណ៌ត្រូវបានគណនា

   centroid នីមួយៗត្រូវបានប្តូរទៅ HEX, HSL និងចំណែករបស់វានៃ pixel សរុប (ភាគរយ)។ luminance ដែលទាក់ទងគ្នា WCAG ត្រូវបានគណនាតាមរូបមន្តស្តង់ដារ ហើយសមាមាត្រភាពផ្ទុយគ្នានឹងទាំងខ្មៅ និងសត្រូវបានបង្ហាញជាមួយ swatch នីមួយៗ។
4. 4
   លទ្ធផលនាំចេញ និងឧបករណ៍ eyedropper

   ក្រុមពណ៌អាចត្រូវបានចម្លងជាទ្រព្យសម្បត្តិផ្ទាល់ខ្លួន CSS អថេរ SCSS ខ្លីៗការកំណត់ Tailwind ឬ JSON។ eyedropper ចុច-ទាក់-គំរូគូសផែនទីការចុចរបស់អ្នកនៅលើការមើលជាមុនត្រឡប់ទៅកូអរដោនេ pixel ប្រភពពិតប្រាកដលើ canvas ពេញ-ការបង្ហាញ បន្ថែមពណ៌ pixel នោះទៅបញ្ជីពណ៌-បានជ្រើសរើសដាច់ដោយឡែក។ ឆ្នូតពណ៌ PNG អាចត្រូវបានទាញយកតាម Canvas toBlob()។

ឧបករណ៍ពាក់ព័ន្ធ