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

Travailler avec des images dans Node.js : redimensionnement et recadrage avec Sharp

\n\n

Dans le développement web moderne, le traitement d'images côté serveur est une tâche courante. Node.js propose plusieurs bibliothèques puissantes pour travailler avec les graphiques. Dans cet article, nous allons examiner en détail la bibliothèque Sharp — un outil rapide et efficace pour le redimensionnement (resize) et le recadrage (crop) d'images.

\n\n

Pourquoi Sharp ?

\n\n

Sharp utilise les bibliothèques natives libvips, ce qui en fait l'une des solutions les plus performantes pour Node.js. Principaux avantages :

\n

\n
• Haute vitesse de traitement (plusieurs fois plus rapide que les alternatives en JavaScript pur)
\n
• Faible consommation de mémoire
\n
• Prise en charge de tous les formats populaires : JPEG, PNG, WebP, AVIF, TIFF
\n
• API simple et intuitive
\n
• Possibilité de travailler avec des flux (streams)
\n

\n\n

Installation

\n\n

L'installation de Sharp dans un projet Node.js se fait avec une seule commande :

\n\n

npm install sharp

\n\n

Après l'installation, la bibliothèque est prête à être utilisée. Assurez-vous que les dépendances nécessaires à la compilation du module natif sont installées sur le système (généralement, cela se fait automatiquement).

\n\n

Redimensionnement de base (resize)

\n\n

La méthode resize() permet de modifier les dimensions d'une image. Examinons les principales options d'utilisation.

\n\n

Exemple 1 : Redimensionnement simple

\n\n

const sharp = require('sharp');\nconst path = require('path');\n\nasync function resizeImage() {\n    try {\n        await sharp('input.jpg')\n            .resize(300, 200) // largeur 300px, hauteur 200px\n            .toFile('output.jpg');\n        console.log('Image redimensionnée avec succès');\n    } catch (error) {\n        console.error('Erreur :', error);\n    }\n}\n\nresizeImage();

\n\n

Dans cet exemple, l'image sera compressée aux dimensions exactes de 300x200 pixels, ce qui peut déformer les proportions.

\n\n

Exemple 2 : Conservation des proportions

\n\n

async function resizeWithProportions() {\n    await sharp('input.jpg')\n        .resize({\n            width: 400, // seulement la largeur\n            height: undefined, // la hauteur sera calculée automatiquement\n            fit: 'inside' // conserve les proportions\n        })\n        .toFile('output_inside.jpg');\n    \n    console.log('Proportions conservées');\n}

\n\n

Le paramètre fit accepte plusieurs valeurs :

\n

\n
• cover — recadre l'image pour remplir complètement les dimensions données (par défaut)
\n
• contain — insère l'image dans les dimensions données en conservant les proportions
\n
• fill — étire l'image aux dimensions données
\n
• inside — réduit l'image pour qu'elle tienne dans les dimensions données
\n
• outside — agrandit l'image pour qu'elle dépasse les dimensions données
\n

\n\n

Recadrage d'images (crop)

\n\n

Sharp propose deux méthodes principales de recadrage : avec la méthode extract() et via les paramètres de resize().

\n\n

Méthode extract()

\n\n

Permet de découper une zone rectangulaire de l'image selon des coordonnées données :

\n\n

async function cropImage() {\n    await sharp('input.jpg')\n        .extract({\n            left: 100,   // marge à gauche\n            top: 50,     // marge en haut\n            width: 300,  // largeur de la zone\n            height: 200  // hauteur de la zone\n        })\n        .toFile('cropped.jpg');\n    \n    console.log('Recadrage effectué');\n}

\n\n

Recadrage automatique lors du redimensionnement

\n\n

Il est souvent nécessaire de redimensionner et de recadrer simultanément une image. Cela se fait avec le paramètre gravity ou position :

\n\n

async function cropAndResize() {\n    await sharp('input.jpg')\n        .resize(200, 200, {\n            fit: 'cover', // recadrer pour