Skia Canvas: การติดตั้งใช้งานแบบไร้เบราว์เซอร์ของ HTML Canvas drawing API สำหรับ Node

 (skia-canvas.org)
4 คะแนน โดย GN⁺ 2024-12-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

แนะนำ

  • Skia Canvas เป็นไลบรารีที่ติดตั้งใช้งาน HTML Canvas drawing API บน Node.js ได้โดยไม่ต้องพึ่งเบราว์เซอร์
  • พัฒนาบนพื้นฐานของเอนจินกราฟิก Skia ของ Google และสร้างผลลัพธ์ที่คล้ายกับองค์ประกอบ <canvas> ของ Chrome
  • เหมาะสำหรับการเรนเดอร์กราฟิกแบบเร่งด้วยฮาร์ดแวร์บนเดสก์ท็อปและเซิร์ฟเวอร์ หรือการส่งออกเป็นฟอร์แมตรูปภาพที่หลากหลาย

ฟีเจอร์หลัก

  • เรนเดอร์บน GPU จึงรวดเร็วและกะทัดรัด โดยประมวลผลงานด้วย native code ที่เขียนด้วย Rust และ C++
  • สามารถเรนเดอร์ลงในหน้าต่างโดยใช้ OS native graphics pipeline และมีเฟรมเวิร์ก UI event ที่คล้ายกับเบราว์เซอร์
  • สามารถสร้างรูปภาพได้ทั้งในฟอร์แมตแรสเตอร์ (JPEG, PNG, WEBP) และเวกเตอร์ (PDF, SVG)
  • สามารถบันทึกรูปภาพเป็นไฟล์ ส่งคืนเป็นบัฟเฟอร์ หรือเข้ารหัสเป็นสตริง dataURL ได้
  • ใช้ native threads จาก worker pool ที่ผู้ใช้กำหนดค่าได้ สำหรับ asynchronous rendering และ file I/O
  • สามารถสร้างหลาย "หน้า" บนแคนวาสเดียวกัน และส่งออกเป็น PDF แบบหลายหน้าไฟล์เดียว หรือเป็นลำดับของรูปภาพที่บันทึกเป็นหลายไฟล์ได้
  • สามารถย่อ ทำให้เรียบ รวม ดึงส่วนออก และแยกเส้นทาง Bézier ให้เป็นส่วนย่อยได้ ด้วย boolean operations ที่มีประสิทธิภาพหรือการอินเตอร์โพเลตแบบ point-to-point
  • นอกจากการสเกล การหมุน และการแปลงแล้ว ยังรองรับการแปลงมุมมองแบบ 3D perspective ด้วย
  • นอกจากแพตเทิร์นแบบบิตแมปแล้ว ยังเติมรูปทรงด้วยเท็กซ์เจอร์แบบเวกเตอร์ และวาดเส้นด้วย marker ที่ผู้ใช้กำหนดเองได้
  • รองรับตัวดำเนินการประมวลผลภาพของ CSS filter อย่างสมบูรณ์
  • มีการควบคุม typography ที่หลากหลาย รวมถึงข้อความหลายบรรทัด ข้อความตัดคำอัตโนมัติ text metrics แยกตามบรรทัด small caps ligatures และฟีเจอร์ OpenType อื่น ๆ
  • สามารถโหลดและใช้งานฟอนต์นอกระบบจากไฟล์ในเครื่องได้

ตัวอย่างการใช้งาน

การสร้างไฟล์รูปภาพ

  • ใช้ Canvas เพื่อสร้างแคนวาสขนาด 400x400 และดึง 2D context มาใช้งาน
  • มีตัวอย่างการเพิ่มไล่สีด้วย createConicGradient และการวาดสี่เหลี่ยม
  • อธิบายวิธีบันทึกรูปภาพ แปลงเป็นบัฟเฟอร์ หรือฝังเป็นสตริง ผ่านฟังก์ชัน asynchronous render

ซีเควนซ์หลายหน้า

  • อธิบายวิธีสร้างหน้าหลายสี แล้วบันทึกเป็นไฟล์ PDF แบบหลายหน้า หรือบันทึกเป็นไฟล์รูปภาพแยกแต่ละไฟล์

การเรนเดอร์ลงหน้าต่าง

  • อธิบายวิธีใช้ Window เพื่อสร้างหน้าต่างขนาด 300x300 และวาดวงกลมผ่านอีเวนต์ draw

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-12-04
ความคิดเห็นจาก Hacker News

  • https://windowjs.org เป็นโปรเจ็กต์ที่ห่อหุ้ม Skia แล้วเปิดให้ใช้งานผ่าน Canvas API พร้อมฝัง v8 เพื่อมอบรันไทม์ขนาดเล็ก

    • โปรเจ็กต์นี้เปิดซอร์สเป็นครั้งแรกเมื่อ 3 ปีก่อน
    • เดิมมีแผนจะทำให้เป็นแพลตฟอร์มสำหรับเกมเดสก์ท็อปที่เขียนด้วย JavaScript โดยเปิดให้ใช้ WebGL, เสียง และอื่น ๆ
    • การพัฒนาหยุดลงเพราะโปรเจ็กต์อื่นและการเปลี่ยนแปลงในชีวิต แต่ก็ดีใจที่ได้เห็นโปรเจ็กต์นี้ซึ่งทำให้ใช้ Canvas นอกเบราว์เซอร์ได้

  • หากสนใจ implementation ของ Canvas ที่เข้ากันได้กับ Node อาจดูตัวเลือกต่อไปนี้ได้

    • canvaskit-wasm มาจากโปรเจ็กต์ Skia และดูเหมือนจะไม่รองรับการเร่งความเร็วด้วย GPU
    • @napi-rs/canvas ให้ binding ที่เร็วที่สุด
    • node-canvas ใช้ Cairo แทน Skia

  • มีความสงสัยเกี่ยวกับจุดประสงค์ในการใช้ไลบรารีเหล่านี้

    • มีความเห็นว่าบนเดสก์ท็อปน่าจะมีไลบรารีเนทีฟที่ดีกว่า

  • Skia มี CanvasKit ซึ่งเป็น WASM build ที่รองรับ Node และโมดูลนี้คือ Rust binding

    • มีความสนใจในข้อดีข้อเสียของแต่ละแนวทาง

  • มีคำถามว่ามันคล้ายกับ wrapper ของ Rust crate หรือไม่

  • เคยทำสิ่งที่คล้ายกันสำหรับ Node/Web และค่อนข้างดีแม้จะยังไม่สมบูรณ์

    • สามารถใช้ SDL เพื่อสร้างหน้าต่างจากฝั่ง OS ได้
    • มีเอกสารและตัวอย่างให้ดู

  • ความพยายามก่อนหน้านี้ติดปัญหาที่ต้องติดตั้ง Node-Gyp จึงใช้งานยาก

    • รอโปรเจ็กต์นี้มานานมาก

  • มันเป็นมากกว่า API สำหรับเรนเดอร์แบบพื้นฐาน

    • สามารถเรนเดอร์ลงในหน้าต่างโดยใช้กราฟิกไปป์ไลน์เนทีฟของ OS และมีเฟรมเวิร์ก UI event คล้ายเบราว์เซอร์ให้ด้วย
    • สามารถเพิ่ม wgpu เพื่อรองรับ WebGPU และเพิ่ม ANGLE เพื่อรองรับ WebGL ได้

  • ใช้มันที่ https://malmal.io เพื่อเรนเดอร์ไทล์ที่วาดจากฝั่งเซิร์ฟเวอร์ และมันทำงานได้ดีมาก

  • มีคนสงสัยว่าจะช่วยในการเรนเดอร์ MapLibre ฝั่งเซิร์ฟเวอร์ได้หรือไม่

    • เพื่อให้บริการภาพย่อของแผนที่