កម្មវិធីកាត់រូបភាព ឥតគិតថ្លៃ

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

ការកាត់កើតឡើងទាំងស្រុងនៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើ HTML5 Canvas API — គ្មានការផ្ទុកឡើង គ្មានម៉ាស៊ីនមេទេ។ អ្នកអូសតំបន់ជម្រើសដោយផ្ទាល់លើធាតុ canvas ហើយពេលអ្នកអនុវត្តការកាត់ ម៉ាស៊ីនបង្ហាញ 2D ភ្ជាប់ជាមួយកម្មវិធីរុករកអានតែ pixel ជម្រើស និងអ៊ិនកូដពួកវាឡើងវិញទៅ JPEG, PNG ឬ WebP។

1. 1
   រូបភាពបានផ្ទុកចូលអង្គចងចាំ

   ឯកសាររបស់អ្នកត្រូវបានអានជាមួយ URL.createObjectURL() ដែលប្រគល់កម្មវិធីរុករក blob URL ក្នុងស្រុក។ HTMLImageElement ដោះកូដឯកសារទាំងស្រុងនៅក្នុងផ្ទាំងកម្មវិធីរុករក — byte រូបភាពមិនដែលចាកចេញពីឧបករណ៍របស់អ្នកទេ។
2. 2
   Pointer Events ដឹកនាំជម្រើសកាត់

   Pointer Events API របស់កម្មវិធីរុករក (ដែលរួមបញ្ចូលធាតុចូលកណ្តុរ ប៉ះ និងប៊ិក) តាមដានការអូសនៅលើស្រទាប់ canvas។ ការចុចនៅក្រៅជម្រើសចាប់ផ្តើមចតុកោណថ្មីមួយ; ការចុចខាងក្នុងផ្លាស់ទីវា; ការចុចជិតកាច់ជ្រុងខាងក្រោម-ស្តាំកែសម្រួលទំហំវា។ ការកំណត់ជាមុនសមាមាត្រទិដ្ឋភាពជម្រើស (1:1, 16:9, 4:3 ។ល។) កំណត់ធរណីមាត្រកំឡុងពេលអូស។
3. 3
   Canvas គូរការមើលជាមុនផ្ទាល់

   នៅរាល់ការផ្លាស់ប្តូរកាត់ បរិបទ Canvas 2D គូររូបភាពឡើងវិញ អនុវត្តស្រទាប់ងងឹតក្រៅជម្រើស សម្អាតតំបន់កាត់ដើម្បីបង្ហាញរូបភាពដើមនៅភាពស្មោះត្រង់ពេញលេញ និងត្រួតដានតារាងច្បាប់មួយភាគបី និងចំណុចទាញកែសម្រួលទំហំពណ៌ខៀវបៃតង។
4. 4
   toBlob() អ៊ិនកូដ និងផ្តល់លទ្ធផល

   ពេលអ្នកចុច Crop canvas ថ្មីក្រៅអេក្រង់ត្រូវបានបង្កើតនៅវិមាត្រកាត់ច្បាស់លាស់។ ctx.drawImage() ចម្លងតែចតុកោណជម្រើស ហើយ canvas.toBlob() អ៊ិនកូដលទ្ធផលដោយប្រើកម្មវិធីអ៊ិនកូដ JPEG, PNG ឬ WebP ដើមកំណើតរបស់កម្មវិធីរុករកនៅការកំណត់គុណភាពដែលអ្នកបានជ្រើសរើស។ លទ្ធផលត្រូវបានប្រគល់ត្រឡប់ជា blob URL ក្នុងស្រុកសម្រាប់ការទាញយក។

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