Travail avec les images en TypeScript : redimensionnement et recadrage avec Sharp et Jimp

Travail avec les images en TypeScript : redimensionnement et recadrage

Dans le développement web moderne, le traitement d'images est l'une des tâches les plus demandées. TypeScript, grâce à son typage strict et son intégration avec Node.js, permet de créer des outils fiables et performants pour le redimensionnement (resize) et le recadrage (crop) d'images. Dans cet article, nous examinerons deux bibliothèques populaires : Sharp (traitement côté serveur) et Jimp (JavaScript pur), ainsi qu'une approche native utilisant l'API Canvas pour le navigateur.

1. Installation et configuration d'un projet TypeScript

Pour commencer, créez un projet et installez les dépendances nécessaires :

npm init -y\nnpm install typescript @types/node sharp jimp\nnpx tsc --init

Dans le fichier tsconfig.json, assurez-vous que "module": "commonjs" et "target": "ES2020".

2. Bibliothèque Sharp — traitement serveur rapide

Sharp utilise le module natif libvips et offre des performances élevées. Il convient aux applications serveur (NestJS, Express).

2.1. Redimensionnement (resize) avec Sharp

La méthode resize() prend la largeur et la hauteur. Vous pouvez spécifier un seul paramètre — le second sera calculé proportionnellement.

import sharp from 'sharp';\n\nasync function resizeImage(inputPath: string, outputPath: string, width: number, height?: number): Promise<void> {\n  try {\n    await sharp(inputPath)\n      .resize(width, height, {\n        fit: 'cover',       // 'cover', 'contain', 'fill', 'inside', 'outside'\n        position: 'center'  // position pour le recadrage en mode cover\n      })\n      .toFile(outputPath);\n    console.log(`Image redimensionnée : ${outputPath}`);\n  } catch (error) {\n    console.error('Erreur de redimensionnement :', error);\n  }\n}\n\n// Exemple d'utilisation\nresizeImage('input.jpg', 'output_800x600.jpg', 800, 600);

2.2. Recadrage (crop) avec Sharp

La méthode extract() permet de découper une zone rectangulaire. Paramètres : left, top, width, height.

async function cropImage(\n  inputPath: string,\n  outputPath: string,\n  left: number,\n  top: number,\n  cropWidth: number,\n  cropHeight: number\n): Promise<void> {\n  try {\n    await sharp(inputPath)\n      .extract({ left, top, width: cropWidth, height: cropHeight })\n      .toFile(outputPath);\n    console.log(`Recadrage effectué : ${outputPath}`);\n  } catch (error) {\n    console.error('Erreur de recadrage :', error);\n  }\n}\n\n// Exemple : découper le centre 400x400 d'une image 800x600\ncropImage('input.jpg', 'cropped_center.jpg', 200, 100, 400, 400);

2.3. Combinaison de redimensionnement et recadrage

Sharp permet de chaîner les opérations. Par exemple, d'abord réduire, puis recadrer :

async function resizeAndCrop(inputPath: string, outputPath: string): Promise<void> {\n  await sharp(inputPath)\n    .resize(500, 500, { fit: 'inside' })  // réduire à 500x500 sans recadrage\n    .extract({ left: 50, top: 50, width: 400, height: 400 }) // recadrer le centre\n    .toFile(outputPath);\n}\n\nresizeAndCrop('input.jpg', 'processed.jpg');

3. Bibliothèque Jimp — JavaScript pur sans dépendances natives

Jimp fonctionne en JavaScript pur, ne nécessite pas l'installation de bibliothèques système supplémentaires. Idéal pour les environnements isolés (par exemple, AWS Lambda).

3.1. Installation de Jimp

npm install jimp\nnpm install @types/jimp  // pour TypeScript

3.2. redimensionnement avec Jimp

import Jimp from 'jimp';\n\nasync function resizeWithJimp(inputPath: string, outputPath: string, width: number, height: number): Promise<void> {\n  try {\n    const image = await Jimp.read(inputPath);\n    image.resize(width, height, Jimp.RESIZE_BILINEAR); // algorithmes : BILINEAR, BICUBIC, NEAREST_NEIGHBOR\n    awa