Skia Canvas : implémentation sans navigateur de l’API de dessin HTML Canvas pour Node

Présentation

• Skia Canvas est une bibliothèque qui implémente l’API de dessin HTML Canvas dans Node.js sans navigateur.
• Basée sur le moteur graphique Skia de Google, elle produit des résultats similaires à l’élément <canvas> de Chrome.
• Elle convient au rendu graphique accéléré par le matériel sur desktop et serveur, ainsi qu’à l’export dans divers formats d’image.

Fonctionnalités principales

• Le rendu s’effectue sur le GPU, ce qui la rend rapide et compacte, avec un traitement assuré par du code natif écrit en Rust et en C++.
• Elle peut effectuer le rendu dans une fenêtre en utilisant les pipelines graphiques natifs du système d’exploitation et fournit un framework d’événements UI similaire à celui d’un navigateur.
• Elle peut générer des images aux formats raster (JPEG, PNG, WEBP) et vectoriels (PDF, SVG).
• Les images peuvent être enregistrées dans des fichiers, renvoyées sous forme de buffer ou encodées en chaînes dataURL.
• Elle utilise des threads natifs dans un pool de workers configurable par l’utilisateur pour le rendu asynchrone et les opérations d’E/S de fichiers.
• Elle permet de créer plusieurs « pages » sur un même canvas et de les exporter soit dans un unique PDF multipage, soit sous forme de séquence d’images enregistrées dans plusieurs fichiers.
• Elle peut simplifier, adoucir, combiner, extraire et atomiser des tracés de Bézier à l’aide d’opérations booléennes efficaces ou d’interpolations point à point.
• En plus de la mise à l’échelle, de la rotation et des transformations, elle prend en charge les transformations de perspective 3D.
• Outre les motifs basés sur des bitmaps, elle peut remplir des formes avec des textures vectorielles et dessiner des lignes avec des marqueurs personnalisés.
• Elle prend entièrement en charge les opérateurs de traitement d’image des filtres CSS.
• Elle offre un contrôle typographique avancé, avec texte multiligne, retour à la ligne par mot, métriques de texte ligne par ligne, petites capitales, ligatures et autres fonctionnalités OpenType.
• Les polices non système peuvent être chargées et utilisées depuis des fichiers locaux.

Exemples d’utilisation

Création de fichiers image

• Exemple montrant comment utiliser Canvas pour créer un canvas de 400x400 et récupérer un contexte 2D.
• Exemple montrant comment utiliser createConicGradient pour ajouter un dégradé de couleurs et dessiner un rectangle.
• Explication de la manière d’enregistrer l’image, de la convertir en buffer ou de l’intégrer sous forme de chaîne via la fonction asynchrone render.

Séquence multipage

• Explication de la manière de créer des pages de différentes couleurs, puis de les enregistrer dans un fichier PDF multipage ou dans des fichiers image individuels.

Rendu dans une fenêtre

• Explication de la manière d’utiliser Window pour créer une fenêtre de 300x300 et dessiner un cercle via l’événement draw.

[GN⁺]

Avis Hacker News

• https://windowjs.org est un projet qui encapsule Skia, l’expose via l’API Canvas et intègre v8 pour fournir un petit runtime

  • Le projet a été publié en open source pour la première fois il y a 3 ans
  • Il était prévu d’en faire une plateforme pour les jeux JavaScript sur desktop, en exposant WebGL, l’audio, etc.
  • Le développement s’est arrêté en raison d’autres projets et de changements de vie, mais cela fait plaisir de voir ce projet qui permet d’utiliser Canvas en dehors du navigateur

• Si vous vous intéressez aux implémentations de Canvas compatibles avec Node, voici quelques références

  • canvaskit-wasm est fourni par le projet Skia et ne semble pas prendre en charge l’accélération GPU
  • @napi-rs/canvas offre les bindings les plus rapides
  • node-canvas utilise Cairo au lieu de Skia

• Il y a une interrogation sur l’usage visé pour ce type de bibliothèques

  • Selon un avis, il existerait de meilleures bibliothèques natives sur desktop

• Skia fournit CanvasKit, un build WASM prenant en charge Node, et ce module est un binding Rust

  • Il y a un intérêt pour les avantages et inconvénients de chaque approche

• Une question est posée sur le fait de savoir si cela ressemble à un wrapper de crate Rust

• Quelque chose de similaire a été créé pour Node/Web, et même si ce n’est pas parfait, c’est bien

  • SDL peut être utilisé pour créer des fenêtres via l’OS
  • La documentation et les exemples peuvent être consultés

• Les tentatives précédentes exigeaient une installation de Node-Gyp, ce qui était difficile

  • Ce projet était attendu depuis longtemps

• Cela va au-delà d’une simple API de rendu

  • Il est possible de rendre dans une fenêtre en utilisant le pipeline graphique natif de l’OS, et cela fournit un framework d’événements d’UI similaire à celui du navigateur
  • On peut ajouter wgpu pour la prise en charge de WebGPU et ANGLE pour la prise en charge de WebGL

• Utilisé sur https://malmal.io pour rendre des tuiles dessinées côté serveur, et cela fonctionne très bien

• Une question est posée sur l’aide potentielle pour le rendu côté serveur de MapLibre

  • Afin de fournir des miniatures de cartes