Travail avec les images en TypeScript : bibliothèques, outils et exemples de code

Travail avec les images en TypeScript : aperçu complet des outils et bibliothèques

TypeScript est un langage puissant pour le développement côté serveur et client, souvent utilisé pour le traitement d'images. Dans cet article, nous examinerons les principales bibliothèques et outils pour travailler avec les images en TypeScript, y compris l'installation, la configuration et des exemples pratiques de code.

Le traitement d'images peut être nécessaire dans divers projets : des applications web aux services backend. TypeScript ajoute un typage strict, ce qui simplifie le développement d'algorithmes complexes et réduit le nombre d'erreurs.

Bibliothèques populaires pour travailler avec les images

• Sharp — bibliothèque haute performance pour Node.js, écrite en C++. Idéale pour le traitement côté serveur : redimensionnement, compression, conversion de formats.
• Jimp — bibliothèque purement JavaScript, ne nécessitant pas de dépendances natives. Adaptée aux opérations simples et aux solutions multiplateformes.
• Canvas — implémentation de HTML5 Canvas pour Node.js. Permet de dessiner, superposer du texte, créer des compositions complexes.
• Pica — bibliothèque pour un redimensionnement d'images de qualité dans le navigateur et Node.js.

Installation et configuration de Sharp en TypeScript

Sharp est l'une des bibliothèques les plus rapides pour le traitement d'images. L'installation se fait via npm :

npm install sharpnpm install @types/sharp --save-dev

Après l'installation, vous pouvez importer la bibliothèque dans un fichier TypeScript :

import sharp from 'sharp';

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

Travail avec Jimp : manipulations simples

Jimp ne nécessite pas de dépendances natives et convient parfaitement aux opérations simples. Installation :

npm install jimpnpm install @types/jimp --save-dev

Exemple de modification de la luminosité et du contraste avec Jimp :

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {  const image = await Jimp.read(inputPath);    image    .brightness(0.2)    // Augmenter la luminosité de 20%    .contrast(0.1)      // Augmenter le contraste de 10%    .write(outputPath);    console.log('Image traitée');};

Canvas : création d'images à partir de zéro

La bibliothèque Canvas permet de créer des images par programmation, de dessiner des formes, de superposer du texte. Installation :

npm install canvasnpm install @types/node --save-dev

Exemple de création d'une image simple avec du texte :

import { createCanvas, loadImage } from 'canvas';import * as fs from 'fs';

const createTextImage = async (  text: string,  outputPath: string): Promise<void> => {  const width = 800;  const height = 200;  const canvas = createCanvas(width, height);  const ctx = canvas.getContext('2d');

  // Remplissage de l'arrière-plan  ctx.fillStyle = '#4a90d9';  ctx.fillRect(0, 0, width, height);

  // Configuration du texte  ctx.font = 'bold 48px Arial';  ctx.fillStyle = '#ffffff';  ctx.textAlign = 'center';  ctx.textBaseline = 'middle';

  // Dessiner le texte  ctx.fillText(text, width / 2, height / 2);

  // Sauvegarder dans un fichier  const buffer = canvas.toBuffer('image/png');  fs.writeFileSync(outputPath, buffer);  console.log('Image créée');};

Compression d'images avec conservation de la qualité

L'optimisation des images est une tâche cruciale pour les projets web. Sharp permet de régler finement les paramètres de compression :