Skip to content

Schnellstart

Dieser Leitfaden hilft Ihnen, schnell mit Sharp zu beginnen und grundlegende Bildverarbeitungsoperationen zu erlernen.

Grundlegende Verwendung

Sharp importieren

javascript
import sharp from 'sharp';

Oder mit CommonJS:

javascript
const sharp = require('sharp');

Bilder lesen

Sharp unterstützt verschiedene Eingabeformate:

javascript
// Aus Datei lesen
const image = sharp('input.jpg');

// Aus Buffer lesen
const image = sharp(buffer);

// Aus Stream lesen
const image = sharp(stream);

Grundlegende Operationen

Größe ändern

javascript
// Auf bestimmte Größe ändern
await sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg');

// Seitenverhältnis beibehalten
await sharp('input.jpg')
  .resize(300, null) // Breite 300, Höhe automatisch
  .toFile('output.jpg');

// Verschiedene Anpassungsmodi verwenden
await sharp('input.jpg')
  .resize(300, 200, {
    fit: 'cover',    // Zuschneiden zum Anpassen
    position: 'center' // Zentriert zuschneiden
  })
  .toFile('output.jpg');

Formatkonvertierung

javascript
// Zu JPEG konvertieren
await sharp('input.png')
  .jpeg({ quality: 80 })
  .toFile('output.jpg');

// Zu WebP konvertieren
await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

// Zu PNG konvertieren
await sharp('input.jpg')
  .png({ compressionLevel: 9 })
  .toFile('output.png');

Zuschneiden

javascript
// Bestimmten Bereich zuschneiden
await sharp('input.jpg')
  .extract({ left: 100, top: 100, width: 200, height: 200 })
  .toFile('cropped.jpg');

Rotation

javascript
// Um 90 Grad rotieren
await sharp('input.jpg')
  .rotate(90)
  .toFile('rotated.jpg');

Erweiterte Operationen

Filtereffekte

javascript
// Unschärfe
await sharp('input.jpg')
  .blur(5)
  .toFile('blurred.jpg');

// Schärfung
await sharp('input.jpg')
  .sharpen()
  .toFile('sharpened.jpg');

// Graustufen
await sharp('input.jpg')
  .grayscale()
  .toFile('grayscale.jpg');

Farbanpassung

javascript
// Helligkeit anpassen
await sharp('input.jpg')
  .modulate({ brightness: 1.2 })
  .toFile('bright.jpg');

// Kontrast anpassen
await sharp('input.jpg')
  .modulate({ contrast: 1.5 })
  .toFile('contrast.jpg');

// Sättigung anpassen
await sharp('input.jpg')
  .modulate({ saturation: 0.8 })
  .toFile('desaturated.jpg');

Ausgabeoptionen

In Datei speichern

javascript
await sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg');

An Buffer ausgeben

javascript
const buffer = await sharp('input.jpg')
  .resize(300, 200)
  .jpeg()
  .toBuffer();

An Stream ausgeben

javascript
sharp('input.jpg')
  .resize(300, 200)
  .jpeg()
  .pipe(fs.createWriteStream('output.jpg'));

Fehlerbehandlung

javascript
try {
  await sharp('input.jpg')
    .resize(300, 200)
    .toFile('output.jpg');
} catch (error) {
  console.error('Bildverarbeitung fehlgeschlagen:', error);
}

Leistungsoptimierung

Stream-Verarbeitung

javascript
// Stream für große Dateien verwenden
const pipeline = sharp()
  .resize(300, 200)
  .jpeg({ quality: 80 });

fs.createReadStream('large-input.jpg')
  .pipe(pipeline)
  .pipe(fs.createWriteStream('output.jpg'));

Parallele Verarbeitung

javascript
// Mehrere Bilder gleichzeitig verarbeiten
const promises = images.map(image => 
  sharp(image)
    .resize(300, 200)
    .jpeg()
    .toBuffer()
);

const results = await Promise.all(promises);

Vollständiges Beispiel

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

async function processImage() {
  try {
    // Vorschaubild erstellen
    await sharp('input.jpg')
      .resize(150, 150, { fit: 'cover' })
      .jpeg({ quality: 90 })
      .toFile('thumbnail.jpg');

    // Mittelgroßes Bild erstellen
    await sharp('input.jpg')
      .resize(800, 600, { fit: 'inside' })
      .webp({ quality: 80 })
      .toFile('medium.webp');

    // Großes Bild erstellen
    await sharp('input.jpg')
      .resize(1920, 1080, { fit: 'inside' })
      .jpeg({ quality: 85 })
      .toFile('large.jpg');

    console.log('Bildverarbeitung abgeschlossen!');
  } catch (error) {
    console.error('Verarbeitung fehlgeschlagen:', error);
  }
}

processImage();

Nächste Schritte

Jetzt, da Sie die Grundlagen von Sharp kennen, können Sie:

Veröffentlicht unter der Apache 2.0-Lizenz.