លោក យ៉ាត់ សៀងហៃ បានបង្កើតបណ្ណាល័យ Sone សម្រាប់បង្ហាញរូបភាពនៅលើ Node-Canvas

ការណែនាំអំពីបណ្ណាល័យ "សូន" (Sone)

នៅក្នុងពិភពកូដកម្មបច្ចុប្បន្ន, ការបង្កើតរូបភាព និង PDF នៅលើម៉ាស៊ីនមេ (Server) គឺជាតម្រូវការដ៏សំខាន់មួយ។ អ្នកអភិវឌ្ឍន៍កម្ពុជាឈ្មោះ លោក យ៉ាត់ សៀងហៃ បានបង្កើតបណ្ណាល័យមួយឈ្មោះថា "សូន" (Sone) ដែលធ្វើឱ្យការងារនេះកាន់តែងាយស្រួល។

សូន គឺជាពាក្យខ្មែរដែលមានន័យថា "ប្រមូលអ្វីៗដែលមានសាច់ទន់ជ្រាយឱ្យកើតជាដុំ, ជាគ្រាប់ឬជារូប"។ ឈ្មោះនេះឆ្លុះបញ្ចាំងពីគោលបំណងរបស់បណ្ណាល័យ ដែលជួយអ្នកអភិវឌ្ឍន៍ក្នុងការរៀបចំធាតុនានាឱ្យក្លាយជារូបភាពឬ PDF យ៉ាងងាយស្រួល។

លក្ខណៈពិសេសរបស់ "សូន"

បណ្ណាល័យនេះត្រូវបានរចនាឡើងដោយមានឥទ្ធិពលពី SwiftUI និងផ្តោតលើការបង្កើតរូបភាពនិង PDF ដោយប្រើធនធានតិចតួច និងមានប្រសិទ្ធភាពខ្ពស់។ លក្ខណៈពិសេសដែលគួរឱ្យចាប់អារម្មណ៍របស់វាមានដូចជា៖

• ការរៀបចំតាមប្រព័ន្ធ Flex Layout - ប្រើប្រាស់បច្ចេកវិទ្យា yoga-layout ដែលជួយឱ្យការរៀបចំធាតុនានានៅលើទំព័រកាន់តែងាយស្រួល
• គាំទ្រ SVG - ដោយមិនចាំបាច់បំលែងជា raster តាមរយៈបណ្ណាល័យ Canvg
• Squircle Rounded Corner - ការបង្កើតជ្រុងរាងមូលដូចស្ទាយ iOS
• ការតម្រឹមអត្ថបទ - គាំទ្រការតម្រឹមខាងឆ្វេង, ខាងស្តាំ, កណ្តាល និងពង្រាយសម្រាប់ភាសាខ្មែរ, ថៃ, ឡាវ និងភាសាផ្សេងៗទៀត
• Font Tracing - ទទួលបានបញ្ជីពុម្ពអក្សរដែលត្រូវបានប្រើក្នុងកូដ
• តារាង (Table) - គាំទ្រការបង្កើតតារាងងាយៗ
• ការបង្កើតពណ៌ Linear Gradient និង Repeating Linear Gradient - សម្រាប់បង្កើតការងារកាន់តែទាក់ទាញ
• Composable - អាចបែងចែកជាសមាសភាគតូចៗ ហើយយកមកប្រើប្រាស់ឡើងវិញបាន
• បង្កើតជា SVG, PDF និងរូបភាព - អាចបង្កើតលទ្ធផលជាទម្រង់ផ្សេងៗគ្នា

របៀបប្រើប្រាស់

ការប្រើប្រាស់ "សូន" គឺងាយស្រួលណាស់។ ដំបូង អ្នកត្រូវដំឡើងវាតាមរយៈ npm៖

npm install sonejs

បន្ទាប់មក អ្នកអាចសរសេរកូដដូចខាងក្រោម៖

import fs from "node:fs/promises";
import { 
  renderAsCanvas, 
  Column, 
  Text, 
  Span
} from "sonejs";

function Document() {
  return Column(
    Text(
      "Hello world! ",
      Span("Sone.")
        .color("orange")
        .weight("bold")
        .shadow("2px 2px 0px rgba(0,0,0,.2)"),
        " 😍🇰🇭"
    ).size(34),
  ).padding(40);
}

// រក្សាទុកជារូបភាព
const canvas = renderAsCanvas(Document(), undefined, undefined);
await fs.writeFile("test/output.png", canvas.toBuffer("image/png"));

// រក្សាទុកជា PDF
const canvas2 = renderAsCanvas(Document(), undefined, undefined, "pdf");
await fs.writeFile("test/output.pdf", canvas2.toBuffer("application/pdf"));

ការគាំទ្រភាសាខ្មែរ

អ្វីដែលគួរឱ្យកត់សម្គាល់គឺ "សូន" មានការគាំទ្រយ៉ាងល្អប្រសើរសម្រាប់ភាសាខ្មែរ។ អ្នកអាចប្រើពុម្ពអក្សរខ្មែរផ្សេងៗដូចជា Moul, Battambang ឬ Inter Khmer ដើម្បីបង្កើតឯកសារដែលមានទាំងអត្ថបទនិងរូបភាព។ ឧទាហរណ៍៖

function Document() {
  return Column(
    Text(
      "ភ្នំពេញ៖ ",
      Span("ពិធីបុណ្យ ព្រះសពរបស់ ").color("green"),
      Span("លោក សុិន សុខខា").font("Moul").color("red").size(23),
      Span(" បានប្រព្រឹត្តិធ្វើទៅនៅ"),
      Span(" ថ្ងៃសៅរ៍ ទី២៦មេសា").weight(700),
      Span(
        "នេះ។ ព្រះមហាក្សត្រ ប្រមុខរដ្ឋ ប្រមុខរដ្ឋាភិបាល និងគណៈប្រតិភូសរុបជាង១៦០ បានមកចូលរួម នៅក្នុងកម្មវិធីនេះ",
      ),
      Span(" លោក សុិន សុខខុង ").font("Moul").color("salmon").size(27),
      Span("។").color("orange"),
    )
      .font("Inter Khmer")
      .size(32)
      .align("justify")
      .color("#333")
      .lineHeight(1.45)
  )
    .maxWidth(700)
    .padding(40);
}

ការគាំទ្រអត្ថបទខ្មែរនេះរួមបញ្ចូលទាំងការតម្រឹមពង្រាយ (justify) ដែលជារឿយៗមានបញ្ហាសម្រាប់ភាសាមិនមែនឡាតាំង។

សេចក្តីសន្និដ្ឋាន

"សូន" គឺជាបណ្ណាល័យដ៏មានសក្តានុពលបង្កើតឡើងដោយអ្នកអភិវឌ្ឍន៍កម្ពុជា ដែលដោះស្រាយបញ្ហាពិបាកក្នុងការបង្កើតរូបភាពនិង PDF នៅលើម៉ាស៊ីនមេ។ វាបង្ហាញពីសមត្ថភាពប្លែកនិងពិសេសសម្រាប់ការគាំទ្រភាសាខ្មែរ ថៃ និងឡាវ ដែលជាញឹកញាប់មិនត្រូវបានយកចិត្តទុកដាក់នៅក្នុងបណ្ណាល័យផ្សេងទៀត។

សម្រាប់អ្នកដែលចាប់អារម្មណ៍ អ្នកអាចស្វែងយល់បន្ថែមនិងទាញយកបណ្ណាល័យនេះពី GitHub ឬប្រើវាតាមរយៈ npm។ វាជាឧទាហរណ៍ល្អមួយនៃការអភិវឌ្ឍន៍បច្ចេកវិទ្យាដោយអ្នកជំនាញកម្ពុជា ដែលអាចប្រើប្រាស់ជាសកលនៅលើពិភពលោក។