Arbeiten mit Bildern: resize, crop in TypeScript

Arbeiten mit Bildern in TypeScript: Größenänderung (resize) und Zuschneiden (crop)

In der modernen Webentwicklung ist die Bildverarbeitung auf der Client-Seite eine häufige Aufgabe. TypeScript ermöglicht dank strenger Typisierung und Integration mit modernen Browser-APIs die sichere und effiziente Durchführung von resize- (Größenänderung) und crop-Operationen (Zuschneiden). In diesem Artikel betrachten wir zwei Ansätze: die Verwendung der nativen Canvas API und die Arbeit mit den serverseitigen Bibliotheken sharp und jimp für Node.js.

1. Canvas API: Client-seitige Verarbeitung ohne Abhängigkeiten

Das browserbasierte HTMLCanvasElement ist der einfachste Weg, Bilder zu manipulieren. Es erfordert keine Installation zusätzlicher Pakete und funktioniert in jedem modernen Browser.

1.1. Größenänderung (resize) mit Canvas

Die Grundidee besteht darin, das Quellbild mit neuen Abmessungen auf die Canvas zu zeichnen und das Ergebnis dann zu exportieren.

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;    }    // Bild mit neuen Abmessungen zeichnen    ctx.drawImage(source, 0, 0, targetWidth, targetHeight);    // Als Blob exportieren (Standardformat ist PNG)    canvas.toBlob((blob) => {      if (blob) resolve(blob);      else reject(new Error('Failed to create blob'));    }, 'image/jpeg', 0.9); // Format und Qualität können angegeben werden  });}

Wichtig: Bei der Vergrößerung von Bildern (upscale) kann die Qualität leiden – Canvas verwendet bilineare Interpolation. Für Vorschaubilder ist dies akzeptabel, für den Druck nicht.

1.2. Zuschneiden (crop) mit Koordinaten

Beim Zuschneiden muss ein rechteckiger Bereich des Quellbildes angegeben werden.

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;    }    // Ausschnitt aus dem Quellbild extrahieren    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');  });}

Tipp: Überprüfen Sie immer, ob die Koordinaten x, y, width, height nicht über die Grenzen des Quellbildes hinausgehen, da Canvas sonst leere Bereiche zurückgibt.

2. Serverseitige Verarbeitung: sharp und jimp

Wenn Sie in einer Node.js- und TypeScript-Umgebung arbeiten, sind die Bibliotheken sharp (C++ nativ, hohe Leistung) und jimp (reines JS, plattformunabhängig) die Standardlösungen.

2.1. Installation und Import

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

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

2.2. Größenänderung (resize) mit sharp

async function resizeWithSharp(  inputPath: string,  outputPath: string,  width: number,  height: number): Promise<void> {  await sharp(inputPath)    .resize(width, height, {      fit: 'cover',      // 'cover' - beschneidet Überflüssiges, 'contain' - passt ein      position: 'center' // Referenzpunkt beim Zuschneiden    })    .toFile(outputPath);}

Der Parameter fit definiert die Einpassungsstrategie:

• cover —