PNG Génération - Framework DiscordJS
Png Generation est un projet visant à simplifier la création d'images dynamiques à partir de technologies web standards telles que le HTML et le CSS, avec la possibilité d'utiliser TailwindCSS ainsi que des frameworks comme VueJS ou React. L'objectif est de permettre la génération d'images structurées et entièrement personnalisables en s'appuyant sur des outils familiers du développement frontend, sans recourir à des solutions plus complexes comme l'API Canvas. L'idée du projet est née à la suite de la découverte de Nuxt Og Image, qui met en avant la génération d'images dynamiques pour des usages tels que les cartes Open Graph, et a conduit au développement d'une solution plus générique, flexible et adaptée à différents contextes applicatifs.
L'utilisation du projet repose sur un principe simple : définir une structure d'image à l'aide de HTML et de CSS (ou TailwindCSS), comme pour n'importe quelle interface web. Le template peut être conçu avec des composants VueJS ou React afin de bénéficier d'une logique dynamique et d'un système de props pour personnaliser le rendu. L'image finale est ensuite générée à partir de ce rendu, permettant de produire des visuels cohérents, maintenables et facilement modifiables.
Côté API, l'intégration consiste à exposer un endpoint chargé de générer l'image à la demande. Les données sont transmises via des paramètres ou un corps de requête, injectées dans le template, puis converties en image au moment de l'appel. Cette approche permet de générer dynamiquement des visuels personnalisés (cartes, aperçus, certificats, bannières, etc.) tout en conservant une structure de code claire et proche des standards du développement frontend.