តើខ្ញុំអាចបង្កើតរូបភាពបណ្តោះអាសន្នដែលមានទំហំជាក់លាក់យ៉ាងដូចម្តេច?

វាយបញ្ចូល ទទឹង (px) និង កម្ពស់ (px) ជ្រើសរើសពណ៌ ឬរូបរាងពណ៌ រួចចុច ទាញយក PNG, ទាញយក JPG ឬ ទាញយក SVG។ តាមលំនាំដើម រូបភាពនឹងបង្ហាញវិមាត្ររបស់វា ដូចជា 800 x 600 ជាស្លាកសម្គាល់។

តើរូបភាពបណ្តោះអាសន្នធំបំផុតដែលខ្ញុំអាចបង្កើតបានមានទំហំប៉ុន្មាន?

ទទឹង និងកម្ពស់នីមួយៗត្រូវតែស្ថិតនៅចន្លោះពី 1 ដល់ 4000 ភីកសែល។ តម្លៃដែលនៅក្រៅជួរនេះនឹងបង្ហាញកំហុសថា ទទឹង និងកម្ពស់ត្រូវតែស្ថិតក្នុងចន្លោះ 1 ដល់ 4000 px។

តើខ្ញុំអាចដាក់រូបភាពបណ្តោះអាសន្នទៅក្នុង HTML ដោយផ្ទាល់ដោយមិនបាច់ប្រើឯកសារយ៉ាងដូចម្តេច?

ចុច ចម្លងជា data URL ហើយបិទភ្ជាប់វាទៅក្នុងស្លាក img ជាតម្លៃ src។ អ្នកក៏អាចប្រើ ចម្លង HTML snippet ឬ ចម្លង CSS background បានផងដែរ។ មិនចាំបាច់មានសេវាបង្ហោះរូបភាពខាងក្រៅឡើយ។

តើខ្ញុំអាចបង្កើតទំហំស្តង់ដារសម្រាប់បណ្តាញសង្គម ឬគេហទំព័របានទេ?

បាន។ ទំហំដំណើរ រួមមាន ផ្សាយលម្អិត Instagram, រឿង Instagram, កាត Twitter, ក្រាហ្វ Open, រូបភាព YouTube, រំអិលកម្ពស់ Facebook និង ក្បាលលិខិត។ ចុច ទាញយក preset ទាំងអស់ (ZIP) ដើម្បីរក្សាទុកទាំងដប់មួយទម្រង់ជាឯកសារ PNG។

តើខ្ញុំអាចដាក់អត្ថបទផ្ទាល់ខ្លួន ឬបន្ទាត់អង្កត់ទ្រូងនៅលើរូបភាពបណ្តោះអាសន្នយ៉ាងដូចម្តេច?

វាយបញ្ចូលស្លាកនៅក្នុង Custom text ឧទាហរណ៍ Hero image ជំនួសឱ្យការបង្ហាញវិមាត្រ។ គូសធីក បង្ហាញបន្ទាត់ឆ្លងទ្រូង (X) ដើម្បីគូសបន្ទាត់អង្កត់ទ្រូងព្រាលៗ។ អត្ថបទវែងនឹងបង្រួមទំហំដោយស្វ័យប្រវត្តិដើម្បីឱ្យសមនឹងទទឹងរូបភាព។

តើវាឥតគិតថ្លៃពិតមែនទេ?

ពិតប្រាកដណាស់។ ឧបករណ៍ទាំងអស់គឺអាចប្រើបានដោយឥតគិតថ្លៃ ដោយមិនបាច់មានគណនី និងមិនបាច់ប្រើកាតឥណទានឡើយ។ ការងារទាំងអស់ដំណើរការនៅលើឧបករណ៍របស់អ្នកផ្ទាល់ ជាជាងនៅលើម៉ាស៊ីនបម្រើ (server) របស់យើង ដែលនេះហើយជាមូលហេតុធ្វើឱ្យវាដំណើរការដោយឥតគិតថ្លៃ។

វាដំណើរការនៅលើទូរស័ព្ទទេ?

បាទ/ចាស។ វាដំណើរការលើកម្មវិធីរុករកទូរសព្ទទំនើបលើ iOS និង Android ដោយមិនចាំបាច់ដំឡើងអ្វីទេ។

🖼️

បង្កើតរូបភាពបណ្តោះអាសន្ន ឥតគិតថ្លៃ

បង្កើតរូបភាព placeholder ដែលមានពណ៌ ជាមួយ dimension អក្សរ និងពណ៌ផ្ទាល់ខ្លួន។ ទំហំស្ដង់ដារសម្រាប់ social media, mockup, និង design comp។

ដំណើរការក្នុងកម្មវិធីរុករករបស់អ្នកគ្មានការចុះឈ្មោះ គ្មានបង្អួចលេចឡើងមិនចាំបាច់ចូលគណនីឥតគិតថ្លៃជារៀងរហូត

ទទឹង (px)

កម្ពស់ (px)

ទំហំដំណើរ

ស្បែករូបភាពពណ៌

ផ្ទៃខាងក្រោយ

អត្ថបទ / បន្ទាត់

អត្ថបទផ្ទាល់ខ្លួន (ទុករហូតទំហំ)

បង្ហាញទំហំបើគ្មានអត្ថបទផ្ទាល់ខ្លួនបង្ហាញបន្ទាត់ឆ្លងទ្រូង (X)

💡 សម្រាប់ HTML mockup៖ ប្រើជម្រើស ‘ចម្លងជា data URL’ ហើយបិទភ្ជាប់ក្នុង <img src="..."> សម្រាប់ placeholder ក្នុងបន្ទាត់។ សម្រាប់ការរចនា Figma / Sketch សូមទាញយក PNG ហើយអូសចូល។

ការប្រើប្រាស់ទូទៅ

រូបភាព កន្លែង ដាក់វាងវ័ល សម្រាប់ ដាក់ឌីហ្សាញ mockupsបង្កើត ធាក់ក្រោម ពណ៌ ចម្លង សម្រាប់ ប្រើ នៅក្នុង Figma, Sketch ឬ ដាក់ឌីហ្សាញ ម៉ាក មុនពេល រូបភាព ពិតប្រាកដ ត្រៀមខ្លួន។
ធានាផ្នែក កន្លែង ដាក់វាងវ័ល សម្រាប់ HTML ក្រុមប្រើ \"ចម្លង ដូចជា URL ទិន្នន័យ\" ដើម្បី ធានាផ្នែក រូបភាព កន្លែង ដាក់វាងវ័ល ដោយផ្ទាល់ នៅក្នុង HTML សម្រាប់ ក្រុម ដ៏ឆាប់រហ័ស។
កន្លែង ដាក់វាងវ័ល សម្រាប់ CMS មាតិកា មាតិកានៅពេល បង្ហាញលក្ខណ៍ CMS សំណាង ប្រើ រូបភាព កន្លែង ដាក់វាងវ័ល ជំនួស មាតិកា ពិតប្រាកដ សម្រាប់ មើលដឹងមុន ទូលាយលាច។
មាជីវជីវ រូបភាព សំណាងបង្កើត ឆាប់រហ័ស រូបភាព កន្លែង ដាក់វាងវ័ល សម្រាប់ Instagram, Facebook, Twitter, LinkedIn អត្ថបទ សំណាង។
CSS របៀប ពិនិត្យ រូបភាពបង្កើត រូបភាព នៅក្នុង មាក ជ្រាល រីកចម្រើន សម្រាប់ សមស្របបង្ខំ CSS របៀប។

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

អ្វីៗទាំងអស់កើតឡើងក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើ HTML Canvas API និងវាក្យសម្ព័ន្ធ SVG ដែលសរសេរដោយដៃ — គ្មានម៉ាស៊ីនមេ គ្មានការផ្ទុកឡើង គ្មានសេវាកម្មភាគីទីបីឡើយ។ អ្នកកំណត់វិមាត្រ ពណ៌ និងអត្ថបទស្លាក ហើយឧបករណ៍គូររូបភាពដោយផ្ទាល់ទៅធាតុ canvas ក្នុងពេលវេលាជាក់ស្តែង បន្ទាប់មក serialise វាទៅ PNG, JPEG ឬ SVG តាមតម្រូវការ។

1
កំណត់រចនាសម្ព័ន្ធវិមាត្រ និងពណ៌
វាយបញ្ចូលទទឹង និងកម្ពស់ (1–4000 ភីកសែលនីមួយៗ) ឬជ្រើសរើសមួយក្នុងចំណោមទំហំកំណត់ជាមុនដប់មួយដែលគ្របដណ្តប់ទំហំប្រព័ន្ធផ្សព្វផ្សាយសង្គម និងការរចនាទូទៅ។ ជ្រើសរើសពណ៌ផ្ទៃខាងក្រោយ និងអត្ថបទពីរូបភាពដែលបានបញ្ចូល ឬវាយបញ្ចូលតម្លៃ hex ណាមួយដោយផ្ទាល់; កម្មវិធីជ្រើសពណ៌ដើម និងចន្លោះអត្ថបទដែលបានផ្ទៀងផ្ទាត់នៅតែស៊ីសង្វាក់គ្នា។
2
Canvas API បង្ហាញការមើលជាមុនភ្លាមៗ
ឥទ្ធិពល React ហៅ drawPlaceholder() រាល់ការផ្លាស់ប្តូរ។ អនុគមន៍នេះប្រើ CanvasRenderingContext2D ដើម្បីបំពេញចតុកោណជាមួយពណ៌ផ្ទៃខាងក្រោយ ជាជម្រើសគូរបន្ទាត់ខ្ចាត់ខ្ចាយផ្តេកមើលស្រអាបនៅ 15% តម្លាភាព បន្ទាប់មកវាស់ និងតម្រឹមកណ្តាលអត្ថបទស្លាករបស់អ្នក — កាត់បន្ថយពុម្ពអក្សរដោយស្វ័យប្រវត្តិរហូតដល់វាសមទៅនឹង 90% នៃទទឹង canvas។
3
នាំចេញជា PNG, JPEG ឬ SVG
ការទាញយក PNG និង JPEG ហៅ canvas.toDataURL() បំប្លែងលទ្ធផល base64 ទៅ Blob ក្នុងសតិ ហើយបញ្ជាឲ្យទាញយក — ទាំងអស់ដំណើរការក្នុងលក្ខណៈស្របគ្នាក្នុងកាយវិការអ្នកប្រើប្រាស់ ដូច្នេះច្បាប់ទាញយករបស់ iOS Safari ត្រូវបានបំពេញ។ ការនាំចេញ SVG សាងសង់ខ្សែអក្សរ SVG ដោយខ្លួនឯងជាមួយចតុកោណត្រូវគ្នា បន្ទាត់ខ្ចាត់ខ្ចាយផ្តេកជាជម្រើស និងធាតុអត្ថបទ បន្ទាប់មករក្សាទុកជាឯកសារ .svg។
4
ការនាំចេញជាបណ្តុំ និងផ្លូវកាត់ចម្លង
ប៊ូតុង 'ទាញយកទំហំកំណត់ជាមុនទាំងអស់' នាំចូល JSZip ដោយថាមវន្ត បង្ហាញឡើងវិញនូវទំហំកំណត់ជាមុនទាំងដប់មួយលើ canvas ក្រៅអេក្រង់ដោយប្រើអនុគមន៍គូរដូចគ្នា ហើយវេចខ្ចប់ PNG ទាំងអស់ទៅជា ZIP តែមួយ។ ប៊ូតុងចម្លងបញ្ចេញ PNG data URL ស្លាក img SVG ក្នុងបន្ទាត់ ឬសេចក្តីប្រកាស CSS background-image សម្រាប់បិទភ្ជាប់ភ្លាមៗទៅក្នុងកូដ។