Skia Canvas: Implementasi tanpa browser dari API menggambar HTML Canvas untuk Node

Pengenalan

• Skia Canvas adalah library yang mengimplementasikan API menggambar HTML Canvas di Node.js tanpa browser.
• Dibangun di atas mesin grafis Skia milik Google, dan menghasilkan keluaran yang mirip dengan elemen <canvas> di Chrome.
• Cocok untuk merender grafis berakselerasi perangkat keras di desktop dan server, atau menghasilkan berbagai format gambar.

Fitur utama

• Rendering dilakukan di GPU sehingga cepat dan ringkas, dengan pekerjaan diproses oleh kode native yang ditulis dalam Rust dan C++.
• Dapat merender ke jendela menggunakan pipeline grafis native OS dan menyediakan framework event UI yang mirip browser.
• Dapat membuat gambar dalam format raster (JPEG, PNG, WEBP) maupun vektor (PDF, SVG).
• Gambar dapat disimpan sebagai file, dikembalikan sebagai buffer, atau dienkode sebagai string dataURL.
• Menggunakan thread native dalam worker pool yang dapat dikonfigurasi pengguna untuk rendering asinkron dan file I/O.
• Dapat membuat beberapa 'halaman' pada canvas tertentu dan mengekspornya sebagai satu PDF multipage atau sebagai rangkaian gambar yang disimpan ke beberapa file.
• Dapat menyederhanakan, menumpulkan, menggabungkan, mengekstrak, dan mengatomisasi jalur Bézier menggunakan operasi boolean yang efisien atau interpolasi titik-ke-titik.
• Selain scaling, rotasi, dan transformasi, juga menyediakan transformasi perspektif 3D.
• Selain pola berbasis bitmap, bentuk juga dapat diisi dengan tekstur berbasis vektor dan garis dapat digambar dengan marker kustom.
• Mendukung sepenuhnya operator pemrosesan gambar CSS filter.
• Menyediakan kontrol tipografi yang kaya, termasuk teks multi-baris, pembungkusan kata, metrik teks per baris, small caps, ligatur, dan fitur OpenType lainnya.
• Font non-sistem dapat dimuat dari file lokal untuk digunakan.

Contoh penggunaan

Membuat file gambar

• Menggunakan Canvas untuk membuat canvas berukuran 400x400, lalu mengambil konteks 2D.
• Menyediakan contoh penambahan gradasi warna dengan createConicGradient dan menggambar persegi panjang.
• Menjelaskan cara menyimpan gambar, mengubahnya menjadi buffer, atau menyematkannya sebagai string melalui fungsi asinkron render.

Rangkaian multipage

• Menjelaskan cara membuat beberapa halaman berwarna berbeda lalu menyimpannya sebagai file PDF multipage atau sebagai file gambar terpisah.

Merender ke jendela

• Menjelaskan cara membuat jendela berukuran 300x300 dengan Window dan menggambar lingkaran melalui event draw.

[GN⁺]

Komentar Hacker News

• https://windowjs.org adalah proyek yang membungkus Skia, mengeksposnya melalui Canvas API, dan menyediakan runtime kecil dengan V8 yang tertanam

  • Proyek ini pertama kali dirilis sebagai open source 3 tahun lalu
  • Ada rencana untuk menjadikannya platform game berbasis JavaScript di desktop dengan mengekspos WebGL, audio, dan lainnya
  • Pengembangan sempat terhenti karena proyek lain dan perubahan dalam hidup, tetapi senang melihat proyek ini yang memungkinkan Canvas digunakan di luar browser

• Jika tertarik pada implementasi Canvas yang kompatibel dengan Node, berikut beberapa referensi

  • canvaskit-wasm disediakan oleh proyek Skia, dan tampaknya tidak mendukung akselerasi GPU
  • @napi-rs/canvas menyediakan binding tercepat
  • node-canvas menggunakan Cairo alih-alih Skia

• Ada rasa penasaran tentang tujuan penggunaan library-library semacam ini

  • Ada pendapat bahwa di desktop mungkin ada library native yang lebih baik

• Skia menyediakan CanvasKit, build WASM yang mendukung Node, dan modul ini adalah binding Rust

  • Ada ketertarikan pada kelebihan dan kekurangan masing-masing pendekatan

• Ada pertanyaan apakah ini mirip dengan wrapper untuk crate Rust

• Pernah membuat sesuatu yang serupa untuk Node/Web, tidak sempurna tetapi cukup bagus

  • Dapat membuat jendela di OS menggunakan SDL
  • Dokumentasi dan contohnya bisa dilihat

• Upaya-upaya sebelumnya sulit karena memerlukan instalasi Node-Gyp

  • Sudah lama menunggu proyek ini

• Ini lebih dari sekadar API rendering sederhana

  • Dapat merender ke jendela menggunakan pipeline grafis native OS dan menyediakan framework event UI yang mirip browser
  • Bisa menambahkan wgpu untuk dukungan WebGPU dan ANGLE untuk dukungan WebGL

• Digunakan di https://malmal.io untuk merender tile yang digambar di server, dan bekerja sangat baik

• Ada rasa penasaran apakah ini bisa membantu merender MapLibre di sisi server

  • Untuk menyediakan thumbnail peta