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

Mis à jour le lundi 5 juillet 2021 par johackim

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 :