Skia Canvas: Triển khai không cần trình duyệt của API vẽ HTML Canvas cho Node

Giới thiệu

• Skia Canvas là một thư viện triển khai API vẽ HTML Canvas trên Node.js mà không cần trình duyệt.
• Dựa trên bộ máy đồ họa Skia của Google, thư viện tạo ra kết quả tương tự phần tử <canvas> của Chrome.
• Phù hợp để kết xuất đồ họa tăng tốc phần cứng trên máy tính để bàn và máy chủ, hoặc xuất ra nhiều định dạng ảnh khác nhau.

Tính năng chính

• Quá trình kết xuất diễn ra trên GPU nên nhanh và gọn nhẹ, đồng thời xử lý công việc bằng mã native viết bằng Rust và C++.
• Có thể kết xuất vào cửa sổ bằng cách sử dụng pipeline đồ họa native của hệ điều hành, đồng thời cung cấp framework sự kiện UI tương tự trình duyệt.
• Có thể tạo ảnh ở các định dạng raster (JPEG, PNG, WEBP) và vector (PDF, SVG).
• Có thể lưu ảnh thành tệp, trả về dưới dạng buffer, hoặc mã hóa thành chuỗi dataURL.
• Sử dụng các luồng native trong worker pool do người dùng cấu hình để kết xuất bất đồng bộ và xử lý I/O tệp.
• Có thể tạo nhiều "trang" trên một canvas nhất định và xuất chúng thành một tệp PDF nhiều trang duy nhất hoặc một chuỗi ảnh được lưu thành nhiều tệp.
• Có thể đơn giản hóa, làm cùn, kết hợp, trích xuất và nguyên tử hóa các đường dẫn Bézier bằng các phép toán boolean hiệu quả hoặc nội suy điểm-đến-điểm.
• Ngoài việc scale, xoay và biến đổi, còn cung cấp phép biến đổi phối cảnh 3D.
• Ngoài các pattern dựa trên bitmap, còn có thể tô hình bằng texture dựa trên vector và vẽ đường bằng marker tùy chỉnh.
• Hỗ trợ đầy đủ các toán tử xử lý ảnh của CSS filter.
• Cung cấp khả năng kiểm soát typography phong phú, bao gồm văn bản nhiều dòng, ngắt dòng theo từ, metrics văn bản theo từng dòng, small caps, ligature và các tính năng OpenType khác.
• Có thể tải và sử dụng phông chữ không thuộc hệ thống từ tệp cục bộ.

Ví dụ sử dụng

Tạo tệp ảnh

• Cung cấp ví dụ dùng Canvas để tạo một canvas kích thước 400x400 và lấy ngữ cảnh 2D.
• Cung cấp ví dụ thêm gradient màu bằng createConicGradient và vẽ hình chữ nhật.
• Giải thích cách lưu ảnh, chuyển thành buffer hoặc nhúng thành chuỗi thông qua hàm bất đồng bộ render.

Chuỗi nhiều trang

• Giải thích cách tạo các trang với nhiều màu khác nhau và lưu chúng thành tệp PDF nhiều trang hoặc thành các tệp ảnh riêng lẻ.

Kết xuất vào cửa sổ

• Giải thích cách tạo một cửa sổ kích thước 300x300 bằng Window và vẽ hình tròn thông qua sự kiện draw.

[GN⁺]

Ý kiến trên Hacker News

• https://windowjs.org là một dự án bọc Skia, cung cấp Canvas API và tích hợp sẵn v8 để mang lại một runtime nhỏ gọn

  • Dự án này lần đầu được phát hành mã nguồn mở cách đây 3 năm
  • Đã từng có kế hoạch biến nó thành một nền tảng cho game desktop viết bằng JavaScript bằng cách cung cấp WebGL, âm thanh, v.v.
  • Việc phát triển đã bị dừng lại do các dự án khác và những thay đổi trong cuộc sống, nhưng thật vui khi thấy dự án này giúp có thể dùng Canvas bên ngoài trình duyệt

• Nếu quan tâm đến các triển khai Canvas tương thích với Node, có thể tham khảo:

  • canvaskit-wasm do dự án Skia cung cấp, có vẻ như không hỗ trợ tăng tốc GPU
  • @napi-rs/canvas cung cấp binding nhanh nhất
  • node-canvas dùng Cairo thay vì Skia

• Có thắc mắc về mục đích sử dụng của các thư viện như thế này

  • Có ý kiến cho rằng trên desktop sẽ có các thư viện native tốt hơn

• Skia cung cấp CanvasKit, một bản dựng WASM hỗ trợ Node, và module này là binding Rust

  • Có sự quan tâm đến ưu và nhược điểm của từng cách tiếp cận

• Có câu hỏi liệu nó có giống với wrapper của Rust crate hay không

• Đã từng làm một thứ tương tự cho Node/Web, tuy chưa hoàn hảo nhưng khá ổn

  • Có thể dùng SDL để tạo cửa sổ từ OS
  • Có thể xem tài liệu và ví dụ

• Những lần thử trước đây khá khó khăn vì cần cài đặt Node-Gyp

  • Đã chờ dự án này từ lâu

• Đây không chỉ là một API render đơn giản

  • Có thể render vào cửa sổ bằng pipeline đồ họa native của OS và cung cấp framework sự kiện UI tương tự trình duyệt
  • Có thể thêm wgpu để hỗ trợ WebGPU và thêm ANGLE để hỗ trợ WebGL

• Được dùng tại https://malmal.io để render các tile được vẽ từ phía máy chủ, và hoạt động rất tốt

• Có người thắc mắc liệu nó có giúp render MapLibre ở phía máy chủ không

  • Để cung cấp thumbnail bản đồ