Traitement et édition d'images en TypeScript : Jimp, Sharp, Canvas

Travailler avec des images en TypeScript : aperçu des bibliothèques Jimp, Sharp et Canvas

TypeScript est un outil puissant pour le développement côté serveur et côté client. Lorsque le besoin de traiter des images se fait sentir (redimensionner, appliquer des filtres, convertir des formats), des bibliothèques spécialisées viennent à la rescousse. Dans cet article, nous examinerons trois solutions populaires : Jimp, Sharp et Canvas. Vous apprendrez comment installer chacune d'elles et verrez des exemples de code fonctionnels en TypeScript.

1. Jimp — purement JavaScript, sans dépendances natives

Jimp (JavaScript Image Manipulation Program) fonctionne exclusivement en JavaScript, il ne nécessite donc pas l'installation de bibliothèques système supplémentaires. C'est un choix idéal si vous avez besoin de compatibilité multiplateforme et de simplicité.

Installation

npm install jimpnpm install @types/jimp --save-dev

Exemple : redimensionnement et application de sépia

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {    const image = await Jimp.read(inputPath);    image        .resize(300, 200)        // largeur 300, hauteur 200        .sepia()                 // effet sépia        .quality(80)             // qualité JPEG        .writeAsync(outputPath);    console.log('Terminé !');}

processImage('input.jpg', 'output.jpg').catch(console.error);

Jimp prend en charge de nombreuses opérations : recadrage, rotation, superposition de texte, modification de la luminosité/contraste, filtres (greyscale, sepia, blur). Toutes les méthodes retournent une instance de Jimp, ce qui permet de chaîner les appels.

2. Sharp — performances maximales

Sharp utilise la bibliothèque native libvips, écrite en C. Cela en fait l'un des outils les plus rapides pour le traitement d'images dans Node.js. Sharp est parfaitement adapté aux serveurs à forte charge et aux pipelines de traitement.

Installation

npm install sharpnpm install @types/sharp --save-dev

Exemple : conversion en WebP et redimensionnement

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {    await sharp(inputPath)        .resize(800, 600, { fit: 'cover' })  // recadrage à la taille        .webp({ quality: 85 })               // format WebP        .toFile(outputPath);    console.log('Conversion terminée');}

convertToWebP('photo.png', 'photo.webp').catch(console.error);

Sharp sait également extraire les métadonnées (EXIF), faire pivoter l'image en fonction de l'orientation EXIF, appliquer un flou, modifier l'espace colorimétrique et travailler avec des tampons sans écriture sur le disque.

Travail avec un tampon

import sharp from 'sharp';import fs from 'fs';

async function processBuffer(inputBuffer: Buffer): Promise<Buffer> {    return await sharp(inputBuffer)        .resize(200, 200)        .jpeg({ quality: 70 })        .toBuffer();}

const raw = fs.readFileSync('large.jpg');processBuffer(raw).then(smallBuffer => {    fs.writeFileSync('small.jpg', smallBuffer);    console.log('Tampon traité');});

3. Canvas (node-canvas) — dessin et texte

La bibliothèque Canvas (node-canvas) fournit une API similaire à celle du HTML5 Canvas. Elle est indispensable lorsque vous devez dessiner un graphique, créer une image à partir de zéro ou superposer du texte complexe.

Installation

npm install canvasnpm install @types/node --save-dev

Attention : node-canvas nécessite l'installation de dépendances système (Cairo, Pango, libjpeg). Détails dans la documentation officielle.

Exemple : création d'une image avec du texte

import { createCanvas, loadImage, registerFont } from 'canvas';import fs from 'fs';

async function