Traitement d'images en Node.js : redimensionnement et recadrage avec Sharp et Jimp

Travail avec les images en Node.js : redimensionnement et recadrage

Dans le développement web moderne, il est souvent nécessaire de traiter les images côté serveur : redimensionner, recadrer, convertir les formats. Node.js propose plusieurs bibliothèques puissantes pour ces tâches. Dans cet article, nous allons examiner les deux plus populaires — Sharp (haute performance, basée sur libvips) et Jimp (JavaScript pur, ne nécessite pas de dépendances natives).

1. Installation et préparation

Pour commencer, créez un nouveau projet et installez l'une des bibliothèques :

mkdir image-processor && cd image-processornpm init -ynpm install sharp jimp

2. Redimensionnement (resize) avec Sharp

Sharp est une bibliothèque rapide en C, idéale pour la production. Elle prend en charge le traitement par flux et la détection automatique du format.

const sharp = require('sharp');

// Redimensionnement simple à une largeur de 300px (la hauteur conserve les proportions)sharp('input.jpg')  .resize(300)  .toFile('output-300.jpg')  .then(() => console.log('Terminé !'))  .catch(err => console.error(err));

// Redimensionnement forcé à des dimensions exactes de 200x200 (avec distorsion)sharp('input.jpg')  .resize(200, 200, { fit: 'fill' })  .toFile('output-fill.jpg');

// Redimensionnement intelligent avec conservation des proportions (recadrage centré)sharp('input.jpg')  .resize(200, 200, { fit: 'cover', position: 'centre' })  .toFile('output-cover.jpg');

3. Recadrage (crop) avec Sharp

La méthode extract permet de découper une zone rectangulaire de l'image.

const sharp = require('sharp');

// Découpage d'une zone : left=100, top=50, width=400, height=300sharp('input.jpg')  .extract({ left: 100, top: 50, width: 400, height: 300 })  .toFile('cropped.jpg')  .then(info => console.log('Recadré :', info));

4. Travail avec Jimp (JavaScript pur)

Jimp est plus lent que Sharp, mais ne nécessite pas de compilation de modules natifs — idéal pour des tâches simples ou des environnements sans droits d'installation de paquets système.

const Jimp = require('jimp');

// redimensionnement à une largeur de 300pxJimp.read('input.jpg')  .then(image => {    return image      .resize(300, Jimp.AUTO) // AUTO conserve les proportions      .writeAsync('output-jimp.jpg');  })  .then(() => console.log('Redimensionnement Jimp terminé'))  .catch(err => console.error(err));

// crop (recadrage) avec coordonnéesJimp.read('input.jpg')  .then(image => {    return image      .crop(100, 50, 400, 300) // x, y, width, height      .writeAsync('cropped-jimp.jpg');  })  .catch(err => console.error(err));

5. Exemple combiné : resize + crop en un seul passage

Il est souvent nécessaire de d'abord recadrer, puis de réduire. Sharp le fait efficacement grâce à son pipeline interne :

const sharp = require('sharp');

sharp('input.jpg')  .extract({ left: 50, top: 30, width: 800, height: 600 })  .resize(400, 300, { fit: 'cover' })  .toFile('result.jpg')  .then(info => console.log('Taille finale :', info.width, 'x', info.height));

6. Comparaison Sharp vs Jimp

• Performances : Sharp est 5 à 10 fois plus rapide pour les gros fichiers.
• Installation : Jimp ne nécessite pas de dépendances natives (simple npm install).
• Fonctionnalités : Sharp prend en charge plus de formats (heif, tiff, avif) et des filtres avancés.
• Traitement par flux : Sharp fonctionne avec les flux Node.js (pipe), Jimp uniquement avec des buffers.
• Recommandation : Pour les services à forte charge, choisissez Sharp. Pour les scripts simples ou les projets d'apprentissage, choisissez Jimp.

7. Travail avec un buffer (sans sauvegarde dans un fichier)

Les images arrivent souvent via HTTP ou sont stockées en mémoire. Les deux bibliothèques prennent en charge le travail avec Buffer :

const sharp = requ