Arbeiten mit Bildern in TypeScript: resize und crop mit Sharp und Jimp

Arbeiten mit Bildern in TypeScript: resize und crop

In der modernen Webentwicklung ist die Bildverarbeitung eine der gefragtesten Aufgaben. TypeScript ermöglicht dank strenger Typisierung und Integration mit Node.js die Erstellung zuverlässiger und leistungsstarker Werkzeuge zum Ändern der Größe (resize) und Zuschneiden (crop) von Bildern. In diesem Artikel betrachten wir zwei beliebte Bibliotheken: Sharp (serverseitige Verarbeitung) und Jimp (reines JavaScript) sowie den nativen Ansatz mit der Canvas API für den Browser.

1. Installation und Einrichtung eines TypeScript-Projekts

Erstellen Sie zunächst ein Projekt und installieren Sie die erforderlichen Abhängigkeiten:

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

Stellen Sie in der Datei tsconfig.json sicher, dass "module": "commonjs" und "target": "ES2020" gesetzt sind.

2. Die Bibliothek Sharp – schnelle serverseitige Verarbeitung

Sharp verwendet das native Modul libvips und bietet eine hohe Leistung. Es eignet sich für serverseitige Anwendungen (NestJS, Express).

2.1. Größenänderung (resize) mit Sharp

Die Methode resize() akzeptiert Breite und Höhe. Es kann nur ein Parameter angegeben werden – der zweite wird proportional berechnet.

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 für den Zuschnitt bei cover\n      })\n      .toFile(outputPath);\n    console.log(`Bildgröße geändert: ${outputPath}`);\n  } catch (error) {\n    console.error('Fehler bei resize:', error);\n  }\n}\n\n// Beispielverwendung\nresizeImage('input.jpg', 'output_800x600.jpg', 800, 600);

2.2. Zuschneiden (crop) mit Sharp

Die Methode extract() ermöglicht das Ausschneiden eines rechteckigen Bereichs. Parameter: 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(`Zuschnitt durchgeführt: ${outputPath}`);\n  } catch (error) {\n    console.error('Fehler bei crop:', error);\n  }\n}\n\n// Beispiel: 400x400 aus der Mitte eines 800x600 Bildes ausschneiden\ncropImage('input.jpg', 'cropped_center.jpg', 200, 100, 400, 400);

2.3. Kombination von resize und crop

Sharp ermöglicht die Verkettung von Operationen. Beispielsweise zuerst verkleinern, dann zuschneiden:

async function resizeAndCrop(inputPath: string, outputPath: string): Promise<void> {\n  await sharp(inputPath)\n    .resize(500, 500, { fit: 'inside' })  // auf 500x500 ohne Zuschnitt verkleinern\n    .extract({ left: 50, top: 50, width: 400, height: 400 }) // Mitte zuschneiden\n    .toFile(outputPath);\n}\n\nresizeAndCrop('input.jpg', 'processed.jpg');

3. Die Bibliothek Jimp – reines JavaScript ohne native Abhängigkeiten

Jimp arbeitet mit reinem JavaScript und erfordert keine Installation zusätzlicher Systembibliotheken. Ideal für isolierte Umgebungen (z. B. AWS Lambda).

3.1. Installation von Jimp

npm install jimp\nnpm install @types/jimp  // für TypeScript

3.2. resize mit 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); // Algorithmen: BILINEAR, BICUBIC, NEAREST_NEIGHBOR\n    awa