កម្មវិធីបង្កើតហត្ថលេខា

1. សេចក្តីផ្តើម

កម្មវិធីបង្កើតហត្ថលេខា គឺជាឧបករណ៍ដែលដំណើរការតាមកម្មវិធីរុករក (Browser) ដែលអនុញ្ញាតឱ្យអ្នកបង្កើតហត្ថលេខាឌីជីថលសរសេរដោយដៃ ដោយប្រើកណ្ដុរ (Mouse) បន្ទះប៉ះ (Touchpad) ឬអេក្រង់ប៉ះ (Touchscreen)។ អ្នកអាចគូរហត្ថលេខារបស់អ្នកដោយផ្ទាល់លើផ្ទាំង Canvas កែតម្រូវពណ៌ និងកម្រាស់បន្ទាត់ កំណត់ពណ៌ផ្ទៃខាងក្រោយ (រួមទាំងភាពថ្លា) និងនាំចេញជាទម្រង់រូបភាពជាច្រើនដូចជា SVG, PNG, JPG និង WEBP។

ឧបករណ៍នេះស័ក្តិសមសម្រាប់ការចុះហត្ថលេខាលើឯកសារឌីជីថល បន្ថែមហត្ថលេខាទៅក្នុងឯកសារ PDF បង្កប់ហត្ថលេខានៅក្នុងផ្នែក Footer នៃអ៊ីមែល ឬរៀបចំរូបភាពហត្ថលេខាផ្ទៃខាងក្រោយថ្លាសម្រាប់គម្រោងរចនា។ ដោយសារតែអ្វីៗទាំងអស់ដំណើរការនៅក្នុងកម្មវិធីរុករករបស់អ្នក មិនចាំបាច់ផ្ទុកឡើង (Upload) ឬដំណើរការនៅខាងម៉ាស៊ីនមេ (Server-side Processing) ឡើយ។ ហត្ថលេខារបស់អ្នកនឹងត្រូវបានបង្កើតភ្លាមៗ ហើយអាចទាញយកបានភ្លាមៗតាមទម្រង់ដែលអ្នកត្រូវការ។

មិនថាអ្នកត្រូវការឯកសារ PNG ដែលមានផ្ទៃខាងក្រោយថ្លាសម្រាប់កិច្ចសន្យា ឯកសារ SVG ដែលអាចពង្រីកបានសម្រាប់ការបោះពុម្ព ឬ JPG សម្រាប់ការចែករំលែកយ៉ាងរហ័សនោះទេ កម្មវិធីបង្កើតហត្ថលេខានេះផ្តល់នូវដំណោះស្រាយដែលរហ័ស និងបត់បែនបាន សម្រាប់ការប្រើប្រាស់ផ្ទាល់ខ្លួន និងវិជ្ជាជីវៈ។

2. របៀបដំណើរការ

ឧបករណ៍នេះប្រើ HTML5 Canvas អន្តរកម្ម ដែលអនុញ្ញាតឱ្យអ្នកប្រើគូរបន្ទាត់ដោយសេរី។ បន្ទាត់នីមួយៗត្រូវបានកត់ត្រាជាលំដាប់នៃចំណុច ដែលរួមមានទីតាំង ពេលវេលា និងទិន្នន័យសម្ពាធ (បើមាន)។ ចំណុចទាំងនេះត្រូវបានដំណើរការជាខ្សែកោងរលូន ដើម្បីឱ្យការសរសេរមើលទៅធម្មជាតិ ជំនួសឱ្យបន្ទាត់គ្រើម ឬបាក់បែក។

ប៉ារ៉ាម៉ែត្របញ្ចូល

• ផ្ទៃ Canvas: ផ្ទៃសម្រាប់គូរហត្ថលេខារបស់អ្នក។
• ពណ៌ប៊ិច: ជ្រើសរើសពណ៌សរសេរផ្ទាល់ខ្លួនជាទម្រង់លេខគោលដប់ប្រាំមួយ (Hexadecimal) (បម្លែងទៅជា RGB ខាងក្នុង)។
• ពណ៌ផ្ទៃខាងក្រោយ: ជ្រើសរើសពណ៌តែមួយ ឬផ្ទៃខាងក្រោយថ្លាដោយប្រើតម្លៃ RGBA។
• កម្រាស់ប៊ិច: មានកម្រិតកម្រាស់ 3 ជម្រើស ដែលកំណត់កម្រាស់បន្ទាត់អប្បបរមា និងអតិបរមា។
• សមាមាត្រទំហំ: ជ្រើសរើសរវាង 16:9, 4:3, 3:4 ឬ 1:1 ដើម្បីគ្រប់គ្រងទំហំ Canvas។

តក្កវិជ្ជានៃការបង្ហាញបន្ទាត់

នៅពេលអ្នកគូរ ប្រព័ន្ធនឹងកត់ត្រាព្រឹត្តិការណ៍ Pointer ឬ Touch ហើយបម្លែងវាទៅជាផ្នែកនៃខ្សែកោង។ វាគណនាល្បឿននៃការគូរបន្ទាត់ ដើម្បីកែតម្រូវកម្រាស់បន្ទាត់ដោយស្វ័យប្រវត្តិ ធ្វើឱ្យមានអារម្មណ៍ដូចការសរសេរដោយប៊ិចពិត។ បន្ទាត់នីមួយៗត្រូវបានរក្សាទុកជាទិន្នន័យមានរចនាសម្ព័ន្ធ ដែលអនុញ្ញាតឱ្យប្រើមុខងារ Undo និងគូរផ្ទៃខាងក្រោយឡើងវិញដោយមិនបាត់បង់ហត្ថលេខា។

ច្បាប់ផ្ទៀងផ្ទាត់

• ប្រសិនបើតម្លៃកម្រាស់ប៊ិចតិចជាង 1 វានឹងប្រើកម្រាស់អប្បបរមាដែលគាំទ្រ។
• ការបញ្ចូលពណ៌ត្រូវតែជាទម្រង់លេខគោលដប់ប្រាំមួយ (Hexadecimal) ត្រឹមត្រូវ។
• មិនអនុញ្ញាតឱ្យប្តូរទំហំ Canvas បន្ទាប់ពីចាប់ផ្តើមគូរ ដើម្បីការពារការខូចទ្រង់ទ្រាយ។
• Undo នឹងលុបតែបន្ទាត់ចុងក្រោយប៉ុណ្ណោះ ប្រសិនបើមានទិន្នន័យបន្ទាត់។

ទម្រង់លទ្ធផល

អ្នកអាចនាំចេញហត្ថលេខារបស់អ្នកជាទម្រង់ខាងក្រោម៖

• SVG – ទម្រង់ Vector ដែលអាចពង្រីកបាន សមស្របសម្រាប់ការបោះពុម្ពគុណភាពខ្ពស់។
• PNG – គាំទ្រផ្ទៃខាងក្រោយថ្លា។
• JPG – ទម្រង់បង្ហាប់សម្រាប់ការប្រើប្រាស់ទូទៅ។
• WEBP – ទម្រង់រូបភាពទំនើបដែលត្រូវបានបង្កើនប្រសិទ្ធភាព។

ដែនកំណត់

• ឧបករណ៍នេះមិនផ្ទៀងផ្ទាត់អត្តសញ្ញាណ ឬផ្តល់ការផ្ទៀងផ្ទាត់ដែលមានសុពលភាពតាមផ្លូវច្បាប់ឡើយ។
• ហត្ថលេខាត្រូវបានគូរដោយដៃ មិនត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិពីអត្ថបទទេ។
• ការប្តូរទំហំបន្ទាប់ពីគូររួច អាចតម្រូវឱ្យសម្អាត Canvas។

3. របៀបប្រើឧបករណ៍នេះ

1. ជ្រើសរើសសមាមាត្រទំហំដែលអ្នកចង់បានសម្រាប់ Canvas។
2. ជ្រើសរើសកម្រិតកម្រាស់ប៊ិច។
3. កំណត់ពណ៌ហត្ថលេខាដែលអ្នកចង់បាន។
4. ជាជម្រើស អ្នកអាចជ្រើសរើសពណ៌ផ្ទៃខាងក្រោយ (ឬទុកឱ្យថ្លា)។
5. គូរហត្ថលេខារបស់អ្នកដោយប្រើ Mouse ឬ Touchscreen។
6. ប្រើUndoដើម្បីលុបបន្ទាត់ចុងក្រោយ ប្រសិនបើចាំបាច់។
7. ចុចClearដើម្បីកំណត់ Canvas ឡើងវិញទាំងស្រុង។
8. ទាញយកហត្ថលេខារបស់អ្នកជាទម្រង់ SVG, PNG, JPG ឬ WEBP។

4. ឧទាហរណ៍ជាក់ស្តែង

ឧទាហរណ៍ទី 1៖ PNG ថ្លាសម្រាប់កិច្ចសន្យា PDF

ការបញ្ចូល៖

• សមាមាត្រទំហំ៖ 4:3
• ពណ៌ប៊ិច៖ ខ្មៅ (#000000)
• ផ្ទៃខាងក្រោយ៖ ថ្លា
• កម្រាស់ប៊ិច៖ មធ្យម

លទ្ធផល៖ download.png (ផ្ទៃខាងក្រោយថ្លា)

ប្រើឯកសារនេះដើម្បីបញ្ចូលហត្ថលេខារបស់អ្នកទៅក្នុងកិច្ចសន្យា PDF ដោយគ្មានប្រអប់ពណ៌សនៅពីក្រោយ។

ឧទាហរណ៍ទី 2៖ SVG គុណភាពខ្ពស់សម្រាប់ការបោះពុម្ព

ការបញ្ចូល៖

• សមាមាត្រទំហំ៖ 16:9
• ពណ៌ប៊ិច៖ ខៀវ (#1a73e8)
• ផ្ទៃខាងក្រោយ៖ ស
• កម្រាស់ប៊ិច៖ ក្រាស់

លទ្ធផល៖ download.svg

ដោយសារតែ SVG ជាទម្រង់ Vector ហត្ថលេខានឹងនៅតែច្បាស់ ទោះបីប្តូរទំហំសម្រាប់ក្បាលលិខិត ឬសម្ភារៈបោះពុម្ពក៏ដោយ។

5. ករណីប្រើប្រាស់សម្រាប់អ្នកអភិវឌ្ឍន៍

- ប្រព័ន្ធស្វ័យប្រវត្តិកម្មឯកសារ

បញ្ចូលរូបភាពហត្ថលេខាដែលបានទាញយកទៅក្នុងដំណើរការបង្កើតឯកសារដោយស្វ័យប្រវត្តិ (ឧ. កិច្ចសន្យា វិក្កយបត្រ និងកិច្ចព្រមព្រៀង)។

- ការចាប់យកហត្ថលេខាផ្នែក Client

ប្រើទិន្នន័យរូបភាព Base64 ដែលបាននាំចេញសម្រាប់ការផ្ទុកឡើងតាម AJAX៖

const dataUrl = signaturePad.toDataURL('image/png');
// ផ្ញើ dataUrl ទៅ Backend API ដើម្បីរក្សាទុក

- បង្កប់ SVG ក្នុងកម្មវិធី Web

ដោយសារតែ SVG ជាទម្រង់ Vector វាអាចបង្កប់ដោយផ្ទាល់ទៅក្នុង HTML៖

<img src="signature.svg" alt="ហត្ថលេខាឌីជីថល">

- ការគ្រប់គ្រងទិន្នន័យប្រកបដោយសុវត្ថិភាព

ដោយសារតែការបង្កើតហត្ថលេខាកើតឡើងទាំងស្រុងនៅក្នុង Browser មិនចាំបាច់មានការដំណើរការនៅផ្នែក Server ទេ លុះត្រាតែអ្នកអនុវត្តវាដោយចេតនា។ វាជួយកាត់បន្ថយហានិភ័យនៃការលេចធ្លាយទិន្នន័យ។ អ្នកអភិវឌ្ឍន៍អាចផ្ទៀងផ្ទាត់ Base64 String នៅផ្នែក Server មុនពេលរក្សាទុក ដើម្បីការពារការបញ្ចូលទិន្នន័យមិនត្រឹមត្រូវ។

- ការដំណើរការផ្ទៃខាងក្រោយក្នុង PHP

$base64 = $_POST['signature'];
$image = str_replace('data:image/png;base64,', '', $base64);
$image = base64_decode($image);
file_put_contents('signature.png', $image);

6. សំណួរដែលសួរញឹកញាប់

តើហត្ថលេខានេះមានសុពលភាពតាមផ្លូវច្បាប់ដែរឬទេ?

ទេ។ ឧបករណ៍នេះបង្កើតតែរូបភាពឌីជីថលនៃហត្ថលេខាសរសេរដោយដៃរបស់អ្នកប៉ុណ្ណោះ។ សុពលភាពផ្លូវច្បាប់អាស្រ័យលើដែនសមត្ថកិច្ច និងរបៀបដែលហត្ថលេខាត្រូវបានប្រើប្រាស់។

តើខ្ញុំអាចបង្កើតហត្ថលេខាដែលមានផ្ទៃខាងក្រោយថ្លាបានទេ?

បាន។ ជ្រើសរើសផ្ទៃខាងក្រោយថ្លា ហើយទាញយកជា PNG ឬ SVG។

តើទម្រង់ណាល្អបំផុតសម្រាប់ការបោះពុម្ព?

សូមណែនាំឱ្យប្រើ SVG សម្រាប់ការបោះពុម្ពគុណភាពខ្ពស់ ព្រោះវាអាចពង្រីកបានដោយមិនបាត់បង់គុណភាព។

តើខ្ញុំអាចប្តូរកម្រាស់ប៊ិចបានទេ?

បាន។ អ្នកអាចជ្រើសរើសពីកម្រិតកម្រាស់បន្ទាត់ដែលបានកំណត់ជាមុនចំនួនបី។

តើឧបករណ៍នេះរក្សាទុកហត្ថលេខារបស់ខ្ញុំឬទេ?

ទេ។ ហត្ថលេខារបស់អ្នកត្រូវបានបង្កើតនៅក្នុង Browser របស់អ្នកតែប៉ុណ្ណោះ លុះត្រាតែអ្នកផ្ទុកវាឡើងទៅកន្លែងផ្សេងដោយខ្លួនឯង។

តើខ្ញុំអាច Undo ផ្នែកមួយនៃហត្ថលេខារបស់ខ្ញុំបានទេ?

បាន។ ប៊ូតុង Undo នឹងលុបតែបន្ទាត់ដែលគូរចុងក្រោយប៉ុណ្ណោះ។