Travail avec les images en TypeScript : bibliothèques et outils

Travail avec les images en TypeScript : bibliothèques et outils

TypeScript est un langage de programmation puissant qui étend JavaScript avec un typage statique. Lors du développement d'applications web modernes, il est souvent nécessaire de traiter des images : redimensionner, convertir des formats, appliquer des filtres ou analyser des pixels. Dans cet article, nous examinerons les principales bibliothèques et outils pour travailler avec les images en TypeScript, leurs fonctionnalités et des exemples d'utilisation.

Bibliothèques populaires pour le traitement d'images

Il existe plusieurs bibliothèques populaires qui s'intègrent parfaitement avec TypeScript. Examinons chacune d'elles en détail.

Sharp

Sharp est une bibliothèque haute performance pour le traitement d'images, basée sur le module natif libvips. Elle est idéale pour les applications serveur Node.js. Sharp prend en charge de nombreux formats (JPEG, PNG, WebP, AVIF, TIFF) et permet d'effectuer des opérations avec une consommation mémoire minimale.

Exemple d'utilisation avec TypeScript :

import sharp from 'sharp';

async function resizeImage(inputPath: string, outputPath: string, width: number, height: number): Promise<void> {  try {    await sharp(inputPath)      .resize(width, height, { fit: 'cover' })      .toFile(outputPath);    console.log('Image redimensionnée avec succès');  } catch (error) {    console.error('Erreur lors du traitement :', error);  }}

// UtilisationresizeImage('input.jpg', 'output.jpg', 800, 600);

Principales fonctionnalités de Sharp :

• Redimensionnement et recadrage
• Conversion de formats
• Ajout de filigranes
• Rotation et retournement
• Gestion de la qualité de compression

Jimp

Jimp (JavaScript Image Manipulation Program) est une bibliothèque purement JavaScript, ne nécessitant aucune dépendance native. Elle fonctionne à la fois dans Node.js et dans le navigateur. Jimp est plus simple à installer, mais plus lent que Sharp pour le traitement de gros fichiers.

Exemple de travail avec Jimp en TypeScript :

import Jimp from 'jimp';

async function applyFilter(imagePath: string, outputPath: string): Promise<void> {  const image = await Jimp.read(imagePath);    image    .resize(300, Jimp.AUTO) // Conserve les proportions    .greyscale()            // Convertit en niveaux de gris    .contrast(0.5)          // Augmente le contraste    .write(outputPath);      console.log('Filtre appliqué');}

applyFilter('photo.jpg', 'photo-edited.jpg');

Fonctionnalités de Jimp :

• Opérations de base : resize, crop, rotate
• Effets de couleur : sepia, greyscale, brightness
• Travail avec la transparence et ajout de texte
• Prise en charge de plus de 20 formats d'images

Canvas API pour les applications navigateur

Si vous développez une application cliente en TypeScript, vous pouvez utiliser l'API Canvas intégrée. Ce n'est pas une bibliothèque, mais une interface web standard pour le dessin et le traitement d'images. TypeScript fournit des types pour toutes les méthodes Canvas.

Exemple de chargement et de traitement d'image sur Canvas :

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas non supporté');  }    const img = new Image();  img.onload = () => {    canvas.width = img.width / 2;    canvas.height = img.height / 2;        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);        // Applique un effet de flou    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // Obtient les données des pixels    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('Premier pixel :', imageData.data.slice(0, 4));  };