Skia Canvas: Browserlose Implementierung der HTML-Canvas-Zeichen-API für Node

Einführung

• Skia Canvas ist eine Bibliothek, die die HTML-Canvas-Zeichen-API in Node.js ohne Browser implementiert.
• Sie basiert auf Googles Skia-Grafik-Engine und erzeugt Ergebnisse, die dem <canvas>-Element von Chrome ähneln.
• Sie eignet sich zum Rendern hardwarebeschleunigter Grafik auf Desktop und Server sowie zur Ausgabe in verschiedenen Bildformaten.

Hauptfunktionen

• Das Rendering erfolgt auf der GPU, ist schnell und kompakt und nutzt in Rust und C++ geschriebenen nativen Code für die Verarbeitung.
• Mithilfe der nativen Grafik-Pipeline des Betriebssystems kann in Fenster gerendert werden; außerdem wird ein Browser-ähnliches UI-Event-Framework bereitgestellt.
• Bilder können in Rasterformaten (JPEG, PNG, WEBP) und Vektorformaten (PDF, SVG) erzeugt werden.
• Bilder lassen sich als Datei speichern, als Buffer zurückgeben oder als dataURL-String kodieren.
• Für asynchrones Rendering und Datei-I/O werden native Threads in einem vom Benutzer konfigurierbaren Worker-Pool verwendet.
• Auf einer gegebenen Canvas können mehrere „Seiten“ erzeugt und als einzelne mehrseitige PDF oder als Bildsequenz in mehreren Dateien ausgegeben werden.
• Bézier-Pfade lassen sich mithilfe effizienter boolescher Operationen oder Punkt-zu-Punkt-Interpolation vereinfachen, abstumpfen, kombinieren, extrahieren und atomisieren.
• Neben Skalierung, Rotation und Transformation werden auch 3D-Perspektivtransformationen unterstützt.
• Formen können nicht nur mit bitmapbasierten Mustern, sondern auch mit vektorbasierten Texturen gefüllt werden; außerdem lassen sich Linien mit benutzerdefinierten Markern zeichnen.
• CSS-Filter-Bildverarbeitungsoperatoren werden vollständig unterstützt.
• Es bietet umfangreiche typografische Kontrolle, darunter mehrzeiliger Text, Wortumbruch, Textmetriken pro Zeile, Kapitälchen, Ligaturen und weitere OpenType-Funktionen.
• Nicht-System-Schriftarten können aus lokalen Dateien geladen und verwendet werden.

Beispielverwendung

Bilddatei erzeugen

• Beispiel für das Erstellen einer 400x400-Canvas mit Canvas und das Abrufen des 2D-Kontexts.
• Beispiel für das Hinzufügen eines Farbverlaufs mit createConicGradient und das Zeichnen eines Rechtecks.
• Erläuterung, wie sich über die asynchrone Funktion render ein Bild speichern, in einen Buffer umwandeln oder als String einbetten lässt.

Mehrseitige Sequenz

• Erläuterung, wie Seiten in mehreren Farben erzeugt und entweder als mehrseitige PDF-Datei oder als einzelne Bilddateien gespeichert werden.

In ein Fenster rendern

• Erläuterung, wie mit Window ein 300x300 großes Fenster erzeugt und über das draw-Event ein Kreis gezeichnet wird.

[GN⁺]

Hacker-News-Kommentare

• https://windowjs.org ist ein Projekt, das Skia kapselt, es über die Canvas-API zugänglich macht und mit eingebettetem v8 eine kleine Runtime bereitstellt

  • Das Projekt wurde vor 3 Jahren erstmals als Open Source veröffentlicht
  • Es war geplant, WebGL, Audio usw. bereitzustellen und es zu einer Plattform für JavaScript-basierte Spiele auf dem Desktop zu machen
  • Wegen anderer Projekte und Veränderungen im Leben wurde die Entwicklung eingestellt, aber es freut mich, dieses Projekt zu sehen, das die Nutzung von Canvas außerhalb des Browsers ermöglicht

• Wenn man sich für eine mit Node kompatible Canvas-Implementierung interessiert, kann man sich Folgendes ansehen

  • canvaskit-wasm wird vom Skia-Projekt bereitgestellt und scheint keine GPU-Beschleunigung zu unterstützen
  • @napi-rs/canvas bietet die schnellsten Bindings
  • node-canvas verwendet Cairo statt Skia

• Es gibt Neugier darauf, wofür solche Bibliotheken verwendet werden

  • Es gibt die Meinung, dass es auf dem Desktop bessere native Bibliotheken geben dürfte

• Skia bietet mit CanvasKit einen WASM-Build, der Node unterstützt, und dieses Modul ist ein Rust-Binding

  • Es besteht Interesse an den Vor- und Nachteilen der einzelnen Ansätze

• Es gibt die Frage, ob es dem Wrapper eines Rust-Crate ähnelt

• Es wurde etwas Ähnliches für Node/Web gebaut, und auch wenn es nicht perfekt ist, ist es gut

  • Mit SDL können Fenster auf dem Betriebssystem erstellt werden
  • Dokumentation und Beispiele können eingesehen werden

• Frühere Versuche waren schwierig, weil eine Installation von Node-Gyp erforderlich war

  • Auf dieses Projekt wurde lange gewartet

• Es ist mehr als nur eine einfache Rendering-API

  • Es kann unter Nutzung der nativen Grafik-Pipeline des Betriebssystems in ein Fenster rendern und bietet ein browserähnliches UI-Event-Framework
  • Für WebGPU-Unterstützung kann wgpu hinzugefügt werden, und für WebGL-Unterstützung kann ANGLE hinzugefügt werden

• Es wird auf https://malmal.io zum Rendern serverseitig gezeichneter Kacheln verwendet und funktioniert sehr gut

• Es gibt die Frage, ob es beim serverseitigen Rendern von MapLibre helfen könnte

  • Um Karten-Thumbnails bereitzustellen