Bildverarbeitung und -bearbeitung mit TypeScript: Jimp, Sharp, Canvas

Arbeiten mit Bildern in TypeScript: Überblick über die Bibliotheken Jimp, Sharp und Canvas

TypeScript ist ein leistungsstarkes Werkzeug für die Server- und Client-Entwicklung. Wenn die Notwendigkeit besteht, Bilder zu verarbeiten (Größe ändern, Filter anwenden, Formate konvertieren), helfen spezialisierte Bibliotheken weiter. In diesem Artikel betrachten wir drei beliebte Lösungen: Jimp, Sharp und Canvas. Sie erfahren, wie Sie jede davon installieren, und sehen funktionierende Codebeispiele in TypeScript.

1. Jimp — reines JavaScript, ohne native Abhängigkeiten

Jimp (JavaScript Image Manipulation Program) arbeitet ausschließlich mit JavaScript und erfordert daher keine Installation zusätzlicher Systembibliotheken. Es ist die ideale Wahl, wenn Sie Plattformunabhängigkeit und Einfachheit benötigen.

Installation

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

Beispiel: Größenänderung und Sepia-Effekt

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {    const image = await Jimp.read(inputPath);    image        .resize(300, 200)        // Breite 300, Höhe 200        .sepia()                 // Sepia-Effekt        .quality(80)             // JPEG-Qualität        .writeAsync(outputPath);    console.log('Fertig!');}

processImage('input.jpg', 'output.jpg').catch(console.error);

Jimp unterstützt viele Operationen: Zuschneiden, Drehen, Textüberlagerung, Ändern von Helligkeit/Kontrast, Filter (greyscale, sepia, blur). Alle Methoden geben eine Jimp-Instanz zurück, was das Verketten von Aufrufen ermöglicht.

2. Sharp — maximale Leistung

Sharp verwendet die native Bibliothek libvips, die in C geschrieben ist. Dies macht es zu einem der schnellsten Werkzeuge für die Bildverarbeitung in Node.js. Sharp eignet sich hervorragend für stark ausgelastete Server und Verarbeitungspipelines.

Installation

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

Beispiel: Konvertierung in WebP und Größenänderung

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {    await sharp(inputPath)        .resize(800, 600, { fit: 'cover' })  // Zuschneiden auf Größe        .webp({ quality: 85 })               // WebP-Format        .toFile(outputPath);    console.log('Konvertierung abgeschlossen');}

convertToWebP('photo.png', 'photo.webp').catch(console.error);

Sharp kann auch Metadaten (EXIF) extrahieren, das Bild basierend auf der EXIF-Ausrichtung drehen, Weichzeichnen, den Farbraum ändern und mit Puffern arbeiten, ohne auf die Festplatte zu schreiben.

Arbeiten mit einem Puffer

import sharp from 'sharp';import fs from 'fs';

async function processBuffer(inputBuffer: Buffer): Promise<Buffer> {    return await sharp(inputBuffer)        .resize(200, 200)        .jpeg({ quality: 70 })        .toBuffer();}

const raw = fs.readFileSync('large.jpg');processBuffer(raw).then(smallBuffer => {    fs.writeFileSync('small.jpg', smallBuffer);    console.log('Puffer verarbeitet');});

3. Canvas (node-canvas) — Zeichnen und Text

Die Bibliothek Canvas (node-canvas) bietet eine API, die der von HTML5 Canvas ähnelt. Sie ist unverzichtbar, wenn Sie ein Diagramm zeichnen, ein Bild von Grund auf neu erstellen oder komplexen Text überlagern müssen.

Installation

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

Achtung: node-canvas erfordert die Installation von Systemabhängigkeiten (Cairo, Pango, libjpeg). Details finden Sie in der offiziellen Dokumentation.

Beispiel: Erstellen eines Bildes mit Text

import { createCanvas, loadImage, registerFont } from 'canvas';import fs from 'fs';

async function