Arbeiten mit Bildern in TypeScript: Bibliotheken und Werkzeuge

Arbeiten mit Bildern in TypeScript: Bibliotheken und Werkzeuge

TypeScript ist eine leistungsstarke Programmiersprache, die JavaScript um statische Typisierung erweitert. Bei der Entwicklung moderner Webanwendungen entsteht häufig die Notwendigkeit, Bilder zu verarbeiten: Größen ändern, Formate konvertieren, Filter anwenden oder Pixel analysieren. In diesem Artikel betrachten wir die wichtigsten Bibliotheken und Werkzeuge für die Arbeit mit Bildern in TypeScript, ihre Möglichkeiten und Anwendungsbeispiele.

Beliebte Bibliotheken zur Bildverarbeitung

Es gibt mehrere beliebte Bibliotheken, die sich hervorragend in TypeScript integrieren lassen. Betrachten wir jede davon genauer.

Sharp

Sharp ist eine leistungsstarke Bibliothek zur Bildverarbeitung, die auf dem nativen Modul libvips basiert. Sie ist ideal für serverseitige Anwendungen mit Node.js. Sharp unterstützt zahlreiche Formate (JPEG, PNG, WebP, AVIF, TIFF) und ermöglicht Operationen mit minimalem Speicherverbrauch.

Beispiel zur Verwendung mit 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('Bild erfolgreich geändert');  } catch (error) {    console.error('Fehler bei der Verarbeitung:', error);  }}

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

Hauptfunktionen von Sharp:

• Größenänderung und Zuschneiden
• Formatkonvertierung
• Wasserzeichen einfügen
• Drehen und Spiegeln
• Steuerung der Komprimierungsqualität

Jimp

Jimp (JavaScript Image Manipulation Program) ist eine reine JavaScript-Bibliothek, die keine nativen Abhängigkeiten erfordert. Sie funktioniert sowohl in Node.js als auch im Browser. Jimp ist einfacher zu installieren, aber bei der Verarbeitung großer Dateien langsamer als Sharp.

Beispiel für die Arbeit mit Jimp in 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) // Behält Proportionen bei    .greyscale()            // Wandelt in Graustufen um    .contrast(0.5)          // Erhöht den Kontrast    .write(outputPath);      console.log('Filter angewendet');}

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

Funktionen von Jimp:

• Grundlegende Operationen: resize, crop, rotate
• Farbeffekte: sepia, greyscale, brightness
• Arbeiten mit Transparenz und Texteinblendung
• Unterstützung von über 20 Bildformaten

Canvas API für Browser-Anwendungen

Wenn Sie eine Client-Anwendung mit TypeScript entwickeln, können Sie die integrierte Canvas API verwenden. Es handelt sich nicht um eine Bibliothek, sondern um eine standardisierte Webschnittstelle zum Zeichnen und Verarbeiten von Bildern. TypeScript stellt Typen für alle Canvas-Methoden bereit.

Beispiel zum Laden und Verarbeiten eines Bildes auf Canvas:

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas wird nicht unterstützt');  }    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);        // Weichzeichnungseffekt anwenden    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // Pixeldaten abrufen    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('Erstes Pixel:', imageData.data.slice(0, 4));  };