Travail avec les images : resize, crop en TypeScript

Travail avec les images en TypeScript : redimensionnement (resize) et recadrage (crop)

Dans le développement web moderne, le traitement d'images côté client est une tâche courante. TypeScript, grâce à son typage strict et à son intégration avec les API modernes du navigateur, permet d'effectuer les opérations resize (redimensionnement) et crop (recadrage) de manière sécurisée et efficace. Dans cet article, nous aborderons deux approches : l'utilisation de l'API Canvas native et le travail avec les bibliothèques serveur sharp et jimp pour Node.js.

1. Canvas API : traitement côté client sans dépendances

Le HTMLCanvasElement du navigateur est le moyen le plus simple de manipuler des images. Il ne nécessite pas l'installation de paquets supplémentaires et fonctionne dans tous les navigateurs modernes.

1.1. Redimensionnement (resize) via Canvas

L'idée principale est de dessiner l'image source sur un canvas avec les nouvelles dimensions, puis d'exporter le résultat.

function resizeImage(  source: HTMLImageElement,  targetWidth: number,  targetHeight: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = targetWidth;    canvas.height = targetHeight;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas context not supported'));      return;    }    // Dessiner l'image avec les nouvelles dimensions    ctx.drawImage(source, 0, 0, targetWidth, targetHeight);    // Exporter en Blob (format par défaut - PNG)    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Failed to create blob'));    }, 'image/jpeg', 0.9); // on peut spécifier le format et la qualité  });}

Important : Lors de l'agrandissement de l'image (upscale), la qualité peut se dégrader — le canvas utilise une interpolation bilinéaire. C'est acceptable pour un aperçu, mais pas pour l'impression.

1.2. Recadrage (crop) avec coordonnées

Le recadrage nécessite de spécifier une zone rectangulaire dans l'image source.

function cropImage(  source: HTMLImageElement,  x: number,  y: number,  width: number,  height: number): Promise<Blob> {  return new Promise((resolve, reject) => {    const canvas = document.createElement('canvas');    canvas.width = width;    canvas.height = height;    const ctx = canvas.getContext('2d');    if (!ctx) {      reject(new Error('Canvas not supported'));      return;    }    // Découper un fragment de l'image source    ctx.drawImage(source, x, y, width, height, 0, 0, width, height);    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Blob creation failed'));    }, 'image/png');  });}

Conseil : Vérifiez toujours que les coordonnées x, y, width, height ne dépassent pas les limites de l'image source, sinon le canvas renverra des zones vides.

2. Traitement serveur : sharp et jimp

Si vous travaillez dans un environnement Node.js et TypeScript, les bibliothèques sharp (C++ native, haute performance) et jimp (JS pur, multiplateforme) sont des solutions standard.

2.1. Installation et importation

// Installation// npm install sharp// npm install jimp

import sharp from 'sharp';import Jimp from 'jimp';

2.2. Redimensionnement (resize) avec sharp

async function resizeWithSharp(  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> {  await sharp(inputPath)    .resize(width, height, {      fit: 'cover',      // 'cover' - recadre l'excédent, 'contain' - adapte      position: 'center' // point de référence pour le recadrage    })    .toFile(outputPath);}

Le paramètre fit définit la stratégie d'adaptation :

• cover —