បង្វិលរូបភាព & ក្រឡាប ឥតគិតថ្លៃ

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

ការបង្វិល ការត្រឡប់ និងការកែសម្រួលមុំនៅទីនេះកើតឡើងទាំងស្រុងនៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើ HTML Canvas API — គ្មានឯកសារត្រូវបានផ្ញើទៅម៉ាស៊ីនមេណាមួយទេ។ ឧបករណ៍គូររូបភាពរបស់អ្នកលើ canvas ក្រៅអេក្រង់នៅមុំ និងការផ្លាស់ប្តូរមាត្រដ្ឋានដែលបានជ្រើសរើស រួចអ៊ិនកូដលទ្ធផលទៅ JPEG, PNG ឬ WebP ដោយប្រើ codec ផ្ទាល់របស់កម្មវិធីរុករក។

1. 1
   រូបភាពបានដោះកូដក្នុងស្រុក

   ឯកសារ JPEG, PNG ឬ WebP របស់អ្នកត្រូវបានផ្ទុកចូល HTMLImageElement តាម object URL ក្នុងស្រុក — សេចក្តីយោងអង្គចងចាំកម្មវិធីរុករកដែលមិនដែលចាកចេញពីឧបករណ៍របស់អ្នកទេ។ វិមាត្រ pixel ធម្មជាតិត្រូវបានអានដោយផ្ទាល់ពី bitmap ដែលបានដោះកូដ។
2. 2
   ការផ្លាស់ប្តូរ Canvas ត្រូវបានអនុវត្ត

   canvas ក្រៅអេក្រង់ត្រូវបានកំណត់ទំហំដើម្បីសមនឹងប្រអប់ព្រំដែនបានបង្វិល (width·cos + height·sin សម្រាប់អ័ក្សនីមួយៗ)។ បរិបទ Canvas 2D បន្ទាប់មកត្រូវបានផ្លាស់ទីទៅកណ្តាល បង្វិលដោយមុំដែលបានជ្រើសរើសជា radians និងធ្វើមាត្រដ្ឋាន -1 នៅលើអ័ក្សផ្ដេក ឬបញ្ឈរសម្រាប់ការត្រឡប់ — ប្រតិបត្តិការ ctx.rotate / ctx.scale ស្តង់ដារទាំងអស់ដោយគ្មានបណ្ណាល័យខាងក្រៅទេ។
3. 3
   ការកាត់ស្វ័យប្រវត្តិកាត់ជ្រុង (ជម្រើស)

   សម្រាប់ការបង្វិលមិនមែនមុំកែងស្តាំ អនុគមន៍ធរណីមាត្រសរសេរដោយដៃ — largestInnerRect — គណនាចតុកោណតម្រឹមអ័ក្សធំបំផុតនៃសមាមាត្រទិដ្ឋភាពដើមដែលសមនៅខាងក្នុងប្រអប់ព្រំដែនបានបង្វិល ដូច្នេះជ្រុងទទេត្រីកោណត្រូវបានដកចេញដោយគ្មានធ្វើឱ្យខូចរូបភាព។
4. 4
   codec កម្មវិធីរុករកអ៊ិនកូដលទ្ធផល

   canvas.toBlob() ប្រគល់ទិន្នន័យ pixel ទៅកម្មវិធីអ៊ិនកូដរូបភាពដើមកំណើតរបស់កម្មវិធីរុករក ផលិត JPEG (ជាមួយគុណភាពជ្រើសរើសបាន និងពណ៌បំពេញផ្ទៃខាងក្រោយសម្រាប់ជ្រុងថ្លា), PNG ឬ WebP Blob ដែលអ្នកទាញយកដោយផ្ទាល់។

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