PDF-Bereich ausschneiden — Smart Lasso

Rechteckiges Zuschneiden passt nicht immer: Ein Stempel ist rund, ein Logo eigenwillig geformt, ein Detail auf einer Zeichnung hat eine komplexe Kontur. Das Lasso-Werkzeug (Cutter) in pdfredX schneidet einen Bereich beliebiger Form aus — Sie umranden das Objekt mit Klicks, und die App löst es in eine separate Ebene, die Sie verschieben, spiegeln und speichern können. Alles im Browser, die Datei wird nie hochgeladen.

Schritt 01. Dokument laden

Öffnen Sie pdfredX und ziehen Sie ein PDF oder Bild in den Upload-Bereich. Die Seite wird lokal über PDF.js in Canvas gerendert — kein einziges Byte geht an einen Server. Klicken Sie 🖌 auf der Karte der gewünschten Seite, um den Editor zu öffnen.

Schritt 02. Das Werkzeug 🔪 Ausschneiden wählen

Wählen Sie im Editor 🔪 Ausschneiden (Lasso) — der Cursor wird zum Fadenkreuz. Das ist kein Freihandzeichnen, sondern der Aufbau eines Polygons Punkt für Punkt: So wird die Kontur sauber statt zittrig.

Schritt 03. Das Objekt mit Klicks umranden

Klicken Sie die Kante des Objekts Punkt für Punkt ab — zwischen den Klicks spannt sich eine „Gummiband"-Linie als Vorschau der nächsten Kante. Führen Sie die Kontur, wie es passt: Je mehr Punkte auf den Kurven, desto präziser der Schnitt. Verklickt? ESC oder ein Rechtsklick bricht die aktuelle Kontur ab, ohne das Werkzeug abzuschalten, und Sie beginnen neu.

Schritt 04. Die Kontur schließen

Schließen Sie die Kontur mit einem Doppelklick oder einem Klick nahe dem ersten Punkt (innerhalb ~22 px) — die Kontur schließt sich, und der Bereich innerhalb des Polygons wird in eine separate fabric.Image-Ebene gelöst. Alles außerhalb der Kontur bleibt außen vor.

Schritt 05. Verschieben und speichern

Das Panel #FAB_CUTTER_PANEL erscheint: Spiegeln H/V, Löschen, OK. Ziehen Sie das ausgeschnittene Fragment an die gewünschte Stelle, spiegeln Sie es bei Bedarf. Klicken Sie OK, dann 💾 Speichern und „PDF erstellen" — die fertige Datei baut jsPDF zusammen und lädt sie direkt aus dem Browser herunter. Kostenlos, ohne Registrierung.

So ist es technisch umgesetzt

Im Kern steht fabric.Polygon aus Fabric.js 5.3.1. Jeder Klick fügt einen Eckpunkt hinzu, das Polygon baut sich in Echtzeit zusammen mit der Gummiband-Linie zum Cursor neu auf. Beim Schließen (fabCutterFinish) wird das Polygon zum clipPath — einer dynamischen Maske auf einem fabric.Image-Element: Sichtbar bleibt nur der Bereich innerhalb der Kontur, der Rest wird abgeschnitten. Der Export des ausgeschnittenen Fragments läuft über die Canvas-API, ohne Server-Rendering.

Bekannte Einschränkungen

Präzision liegt in der Punktzahl. Setzen Sie auf glatten Kurven mehr Eckpunkte: Das Polygon verbindet benachbarte Punkte mit geraden Strecken, bei wenigen Punkten wirkt eine Kurve facettiert.

Entlang des Kontrasts schneiden. Eine scharfe Objektkante vor dem Hintergrund lässt sich leicht abfahren; ein Objekt, das mit dem Hintergrund verschmilzt, erfordert mehr Sorgfalt — eine automatische Kantenerkennung gibt es nicht.

Gerastertes Ergebnis. Das ausgeschnittene Fragment ist ein Bild, kein Vektor. Markierbarer Text darin wird nach dem Speichern Teil des Bildes.

Wenn Ihr Ziel nicht ist, ein Objekt auszuschneiden, sondern es zu entfernen und den Hintergrund an seiner Stelle wiederaufzubauen (sodass keine Spur bleibt), ist das das Werkzeug Objekt aus PDF entfernen.

Jetzt ausprobieren — pdfredx.com, ohne Registrierung, Ihre Datei bleibt bei Ihnen.

Sie brauchen ein Element aus einem Dokument — einen Stempel, eine Unterschrift, einen Abschnitt einer Zeichnung, ein Stück eines Layouts. Eine kleine Aufgabe, aber das Dokument ist oft vollständig: ein Vertrag, technische Unterlagen, ein Entwurf unter NDA. Und um ein Fragment auszuschneiden, verlangt ein gewöhnlicher Online-Dienst, die ganze Datei auf seinen Server zu laden. Sehen wir uns an, warum das ein unnötiges Risiko ist und wie man entlang einer Kontur lokal im Browser schneidet.

Wohin das Dokument bei serverbasierten Cuttern geht

Wenn Sie ein PDF in einen gewöhnlichen Online-Editor hochladen, reist die ganze Datei zu einer entfernten Maschine. Was danach passiert, hängt von der Richtlinie des Dienstes ab — jener, die kaum jemand liest:

• Die Datei wird im temporären Speicher eines Auftragsverarbeiters abgelegt (AWS, GCP, Azure);
• sie wird auf einem fremden Server verarbeitet;
• sie wird von Stunden bis zu Tagen „zur Sicherheit" aufbewahrt;
• sie wird mitsamt Metadaten protokolliert — IP, Zeitstempel, Dateiname und -größe.

Das Paradox: Um einen Stempel herauszuholen, geben Sie das ganze Original — mit diesem Stempel und dem gesamten übrigen Inhalt — an eine Maschine, die Sie nicht kontrollieren. Für Zeichnungen unter NDA, Verträge und Entwürfe ist das ein direktes Leck geistigen Eigentums. Aus DSGVO-Sicht geben Sie zudem die Kontrolle über die Verarbeitung aus der Hand.

Vollständige Isolation im Browser: So schneidet pdfredX entlang einer Kontur

pdfredX lädt Ihre Datei auf keinen Server. Das ist eine überprüfbare Eigenschaft der Architektur.

Die Datei wird lokal gelesen. PDF.js öffnet das Dokument im Tab über FileReader und zeichnet die Seite in Canvas. Es gibt keine Netzwerkanfrage, die Ihre Datei transportiert.

Der Schnitt wird im Speicher des Tabs berechnet. Das Lasso baut ein Polygon und wendet einen clipPath auf das Bild an — alles Pixel-Operationen auf einer bereits geladenen Seite. Nichts wird gesendet.

Die fertige Datei wird auf dem Client zusammengebaut. Das ausgeschnittene Fragment und das finale PDF baut jsPDF direkt im Tab und übergibt sie dem Browser zum Download — in Ihren Downloads-Ordner, nicht zum Server und zurück.

Funktioniert offline. Öffnen Sie das Werkzeug, trennen Sie die Internetverbindung und schneiden Sie den benötigten Bereich aus — alles läuft weiter. Das Netz wird nur gebraucht, um die App einmal zu laden.

Schritt für Schritt, ohne Server-Upload

01. Dokument laden. Ziehen Sie das PDF in den Upload-Bereich auf pdfredx.com. FileReader liest die Datei lokal — sie verlässt das Gerät nicht.

02. Fragment umranden. Klicken Sie 🖌 auf der Seite, wählen Sie 🔪 Ausschneiden, umranden Sie das Objekt mit Klicks entlang der Kontur und schließen Sie es mit einem Doppelklick.

03. Speichern und schließen. Ziehen Sie das ausgeschnittene Stück an die gewünschte Stelle, klicken Sie OK → 💾 Speichern → „PDF erstellen". Nach dem Schließen des Tabs sind die Dateidaten aus dem Speicher weg.

Was wir nicht garantieren können — ein ehrlicher Hinweis

Die clientseitige Verarbeitung schützt das Dokument davor, an externe Server gesendet zu werden, ist aber kein Schild gegen jede Bedrohung — das Gegenteil zu behaupten wäre unehrlich.

Schadsoftware oder ein Keylogger auf Ihrem Gerät. Ist die Maschine kompromittiert, kann Software Dateien am Browser vorbei von der Festplatte lesen.

Browser-Erweiterungen mit weitreichenden Rechten. Eine Erweiterung mit dem Zugriff „Daten auf allen Websites lesen" kann theoretisch Tab-Inhalte sehen. Arbeiten Sie bei sensiblen Dokumenten in einem Profil ohne Fremd-Erweiterungen oder in einem privaten Fenster.

Die gespeicherte Datei bleibt auf Ihrer Festplatte. Ist das Gerät nicht durch Verschlüsselung geschützt, können vertrauliche Dateien bei physischem Zugriff von Dritten gelesen werden.

Wir gewährleisten die Isolation auf Ebene des Browser-Tabs. Der Rest liegt beim Nutzer.

Schneiden Sie das benötigte Fragment aus einem Dokument ohne Server-Upload — pdfredx.com, kostenlos, ohne Registrierung.

Ein Rechteck auszuschneiden ist einfach. Eine Form mit beliebiger Kontur auszuschneiden — einen Stempel, ein Detail auf einer Zeichnung, ein unregelmäßiges Objekt — ist schon interessanter: Man braucht ein aus Punkten gebautes Polygon, eine Gummiband-Linie hinter dem Cursor, ein sauberes Schließen und eine Maske, die alles Übrige abschneidet. Sehen wir uns an, wie das Lasso-Werkzeug (cutter) in pdfredX gebaut ist: fabric.Polygon + clipPath, komplett auf dem Client, ohne Server-Rendering.

Die architektonische Herausforderung und die Wahl des Ansatzes

Warum ein Polygon, kein Freihand. Freihandzeichnen ergibt eine zittrige Kontur und Tausende Punkte. Ein Polygon aus Klicks zu bauen bedeutet bewusste Eckpunkte: Die Kontur ist sauber, günstiger zu berechnen, und der Nutzer kontrolliert jede Kante. Fürs Konturschneiden ist das der richtige Kompromiss zwischen Präzision und Bedienbarkeit.

Warum clipPath, nicht manuelles Pixel-Ausschneiden. Man könnte alles außerhalb der Kontur Pixel für Pixel über getImageData auf null setzen. Aber Fabric.js bietet einen fertigen Mechanismus: clipPath — eine an ein Objekt gebundene Maske. Das Rendern nur des inneren Bereichs übernimmt die Engine, hardwarebeschleunigt, ohne manuelle Pixelschleifen.

Warum auf Canvas, nicht über die PDF-Struktur. Die Seite ist von PDF.js bereits in ein Bild gerastert. Wir arbeiten an Pixeln über Canvas 2D und Fabric.js, ohne die binäre PDF-Struktur zu parsen. Und ohne Server: Die Datei verlässt den Tab nicht.

Die Umsetzung im Detail

Das Polygon aus Punkten bauen

Jeder Klick fügt einen Eckpunkt ins Punkte-Array, das Polygon wird neu gebaut, und eine „Gummiband"-Linie spannt sich zum Cursor — eine Vorschau der nächsten Kante:

cutterPoints.push({ x, y });
// temporäres Vorschau-Polygon (gestrichelt — ein Helfer, kein Inhalt)
cutterPreview = new fabric.Polygon(cutterPoints, {
  fill: 'rgba(124,92,252,.12)',
  stroke: '#7c5cfc', strokeDashArray: [5, 4],
  selectable: false, evented: false,
});

Die gestrichelte Kontur kennzeichnet ein Helfer-Objekt: Beim Speichern werden solche Objekte entfernt, damit die Striche nicht ins Ergebnis „eingebrannt" werden.

Die Kontur schließen

Die Kontur endet bei einem Doppelklick oder einem Klick nahe dem ersten Punkt. Die Näheschwelle liegt bei etwa 22 Pixeln:

const dx = x - cutterPoints[0].x, dy = y - cutterPoints[0].y;
if (Math.hypot(dx, dy) < 22) fabCutterFinish();

Eine Schwelle von 22 px ist ein Gleichgewicht: kleiner, und man trifft den ersten Punkt schwer, größer, und es gibt versehentliche Schließungen bei dichten Konturen.

Abschneiden über clipPath

Beim Schließen wird das Polygon zur Bildmaske:

const clip = new fabric.Polygon(cutterPoints, { absolutePositioned: true });
const cut = new fabric.Image(sourceEl, { clipPath: clip });
fabCanvas.add(cut);

Sichtbar bleibt nur der Bereich innerhalb des Polygons — der Rest wird von der Maske abgeschnitten. Das Fragment wird ein separates fabric.Image-Objekt, das man ziehen und spiegeln kann.

Die Falle: ein synchrones Rendern vor dem Export

Der entscheidende Punkt, bei dem man leicht danebenliegt. Bevor Sie die Pixel des ausgeschnittenen Fragments über drawImage(lowerCanvasEl) abgreifen, müssen Sie die gestrichelte Vorschau-Polylinie synchron entfernen und ein Neuzeichnen erzwingen:

fabCanvas.remove(cutterPreview);
fabCanvas.renderAll();              // synchron, VOR drawImage
ctx.drawImage(fabCanvas.lowerCanvasEl, ...);

Ohne ein explizites renderAll() zeichnet Fabric das Canvas asynchron zum nächsten Frame neu — und die Helfer-Striche gelangen ins ausgeschnittene Fragment (das war ein echter Bug: violette Striche „getuscht" entlang der Schnittkante). Ein synchrones Rendern garantiert ein sauberes Ergebnis.

Kompromisse und Einschränkungen

Facettierung bei Kurven. Das Polygon verbindet Eckpunkte mit Geraden. Bei glatten Bögen braucht man mehr Punkte, sonst wird die Kontur kantig. Das ist der Preis von Einfachheit und Vorhersagbarkeit gegenüber Splines.

Keine automatische Kantenerkennung. Das Werkzeug schneidet strikt entlang Ihrer Punkte, nicht nach dem Kontrast des Objekts. Eine Kante, die mit dem Hintergrund verschmilzt, erfordert sorgfältigeres Abfahren.

Gerastertes Ergebnis. Der Schnitt ist ein maskiertes Bild, kein Vektor. Eine Textebene darin wird nach dem Speichern Teil des Bildes.

Selbstüberschneidungen. Eine Kontur mit komplexen Selbstüberschneidungen füllt Fabric nach der Füllregel — das Ergebnis kann vom Erwarteten abweichen. Für einen sauberen Schnitt führen Sie die Kontur ohne Schleifen.

Wollen Sie es testen — laden Sie eine Zeichnung oder einen Scan auf pdfredx.com und schneiden Sie ein Fragment beliebiger Form aus. Ohne Registrierung, ohne Datei-Uploads auf einen Server.