Générer dynamiquement des images avec node-canvas

Pour générer des images de manière dynamique en Node.js, il existe la librairie node-canvas :

yarn add -D canvas canvas-txt

// script.js
const fs = require('fs');
const { createCanvas } = require('canvas');
const { default: canvasTxt } = require('canvas-txt');

const createImage = (text, path = 'image.jpg', width = 1600, height = 900) => {
    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#101827';
    ctx.fillRect(0, 0, width, height);

    canvasTxt.fontSize = 72;
    canvasTxt.fontWeight = 500;
    canvasTxt.font = 'Roboto';
    canvasTxt.align = 'center';
    canvasTxt.vAlign = 'middle';
    ctx.fillStyle = '#E5E7EB';
    canvasTxt.drawText(ctx, text, 0, canvas.height / 4, canvas.width - 10, canvas.height / 2);

    const buffer = canvas.toBuffer('image/jpeg');
    fs.writeFileSync(path, buffer);
};

createImage('Hello World!');

Lorsque j'exécute ce script (node script.js), une image avec un fond gris et un texte blanc "Hello World!" sera créée.

C'est cette librairie que j'utilise pour générer automatiquement toutes les previews de mon Digital Garden.

Références :

• Programmation