Bild in PDF einfügen — Fotos oder Logos online hinzufügen

Sie möchten ein Logo auf einen Briefkopf setzen, einen gescannten Stempel auf einen Vertrag legen, ein Foto in einen Bericht einfügen oder eine Unterschrift unter den Text. Das Werkzeug „Bild einfügen" in pdfredX legt ein beliebiges Bild über die Seite — direkt im Browser: Sie bewegen, skalieren, drehen und neigen es mit Reglern und speichern dann. Nichts wird auf einen Server hochgeladen.

Schritt 01. Die Seite öffnen und ein Bild wählen

Laden Sie ein PDF oder ein Foto auf pdfredx.com, öffnen Sie die gewünschte Seite im Editor (FAB) und aktivieren Sie das Werkzeug 🖼️ „Einfügen". Eine Dateiauswahl öffnet sich — wählen Sie ein PNG, JPG oder Logo. Das Bild wird lokal über FileReader gelesen, nichts geht an einen Server.

Das Bild erscheint in der Mitte der Seite, auf etwa 60 % der Breite skaliert — sofort sichtbar und leicht zu bewegen.

Schritt 02. Positionieren, drehen und neigen

Das eingefügte Bild ist ein Objekt mit den üblichen Griffen: Ziehen Sie an den Ecken, um die Größe zu ändern, am oberen Griff, um zu drehen, in der Mitte, um zu bewegen. Unten öffnet sich ein Feld #FAB_INSERT_PANEL mit zusätzlichen Einstellungen:

• Neigungsregler (skewX / skewY) — scheren das Bild horizontal und vertikal in Grad. So „liegt" ein Stempel oder Foto im Winkel der Seite und ahmt eine Neigung nach.
• Spiegeln H / V — spiegelt das Bild horizontal oder vertikal (⇄ / ⇅).
• 🗑 Löschen — entfernt das eingefügte Bild.
• ✓ OK — fixiert es und hebt die Auswahl auf.

Ein transparentes PNG (Logo, Stempel, Unterschrift) liegt ohne weißen Hintergrund über dem Text — sichtbar ist nur die Zeichnung selbst.

Schritt 03. Speichern

Klicken Sie im Editor auf „Speichern" — das Bild wird in voller Auflösung in die Seite eingebrannt (über den Export-Multiplikator), und das editUrl wird aktualisiert. Das Ergebnis ist sofort in der Galerie zu sehen. Danach baut „PDF erstellen" die finale Datei zusammen. Der Download erfolgt direkt aus dem Browser. Kostenlos, ohne Registrierung, ohne Server-Warteschlange.

Wie es technisch funktioniert

Das Einfügen läuft über Fabric.js. fabInsertImageFromFile liest die Datei in ein dataURL und erstellt ein fabric.Image: Das Bild wird auf 60 % des Canvas skaliert und zentriert. Es wird zu einem vollwertigen Objekt auf dem Canvas — die Standard-Fabric-Griffe (Bewegen, Skalieren, Drehen) arbeiten damit.

Die Neigung wird über die Eigenschaften skewX / skewY des Objekts gesetzt: Die Regler rufen obj.set('skewX', …) auf und zeichnen das Canvas neu. Das Spiegeln schaltet flipX / flipY um. Beim Speichern brennt saveFab alles in voller Auflösung in das Seitenbild, sodass das Eingefügte nicht verschwimmt.

Bekannte Einschränkungen

Die Neigung ist eine Scherung (Skew), keine volle Perspektive. Die Regler scheren das Bild entlang der Achsen — genug, um einen Stempel unter die Neigung der Seite zu „schieben". Aber es ist keine 4-Punkt-Perspektivkorrektur: Parallele Kanten bleiben parallel, der „Trapez"-Effekt (bei dem die ferne Kante schmaler als die nahe ist) wird nicht wiedergegeben.

Das Ergebnis ist ein Raster. Das Eingefügte wird in das Seitenbild eingebrannt; im fertigen PDF lässt es sich nicht mehr als separate Ebene verschieben.

Bearbeitung Seite für Seite. Das Bild wird auf eine geöffnete Seite nach der anderen eingefügt.

Möchten Sie eine halbtransparente Marke auf alle Seiten setzen statt nur einzufügen? Das ist das Werkzeug Wasserzeichen. Und um das Dokument mit einem Passwort zu sperren — PDF schützen.

Probieren Sie es gleich aus — pdfredx.com, ohne Registrierung, Ihre Dateien bleiben bei Ihnen.

Ein Vertrag muss abgezeichnet werden: den gescannten Stempel der Organisation setzen, eine Unterschrift einfügen, ein Logo auf den Briefkopf bringen. Meist geschieht das aus einem PNG mit transparentem Hintergrund — ein vorab erfasster Stempel oder eine Unterschrift. Das Problem: Ein gewöhnliches Online-Tool zum Einfügen eines Bildes in ein PDF verlangt, den Vertrag selbst auf seinen Server zu laden. Das heißt: Ein Dokument mit Angaben, Beträgen und Unterschriften wandert auf eine fremde Maschine, nur um ein einziges Bild einzufügen. Sehen wir uns an, wie man das lokal macht und warum es wichtig ist.

Warum das ein sensibler Vorgang ist

Ein Stempel und eine Unterschrift sind genau das, was einem Dokument Gewicht verleiht. Der Vertrag, auf den sie gesetzt werden, ist fast immer vertraulich: Vertragsbedingungen, personenbezogene Daten, Bankverbindungen. Ihn vollständig an den Server eines Drittanbieters zu senden, ist genau das Risiko, das man beim Signieren vermeiden möchte.

Gesondert zu bedenken: die transparente Stempeldatei selbst (ein PNG-Faksimile) sollte ebenfalls nicht auf fremden Servern herumgereicht werden — sie ist Ihr wiederverwendbarer „Abdruck".

Der DSGVO-Blickwinkel

Sobald der Vertrag auf den Server eines Dienstes hochgeladen wird, findet im Sinne der DSGVO eine Übermittlung personenbezogener Daten an einen Dritten statt — für das Einfügen eines einzigen Bildes. Das zieht eine ganze Pflichtenkette nach sich: einen Auftragsverarbeitungsvertrag (AVV) mit dem Anbieter, die Prüfung des Serverstandorts (Übermittlung in Drittländer außerhalb der EU), eine Rechtsgrundlage. Die lokale Verarbeitung dreht die Logik um: Verlässt die Datei das Gerät nicht, gibt es keine Übermittlung an einen Dritten — und die Pflichtenkette entfällt.

Lokales Einfügen: das Dokument verlässt den Tab nicht

pdfredX fügt ein Bild ein, ohne weder den Vertrag noch die Stempeldatei irgendwohin hochzuladen. Das ist eine Folge der Architektur und lässt sich überprüfen.

Die Dateien werden lokal gelesen. Sowohl die PDF-Seite als auch das Stempelbild öffnen sich im Tab über FileReader. Es gibt keine Netzwerkanfrage mit ihnen.

Das Einfügen geschieht im Speicher des Tabs. Platzierung, Drehung, Neigen in den Winkel der Seite, Spiegeln — all das sind Operationen auf bereits geladenen Daten. Nichts wird versendet.

Die fertige Datei entsteht auf dem Client. Das signierte Dokument wird direkt im Tab erzeugt und landet in „Downloads", statt zu einem Server und zurück zu fliegen.

Es funktioniert offline. Laden Sie den Vertrag und den Stempel, trennen Sie die Internetverbindung und zeichnen Sie ab — alles läuft weiter. Das Netz wird nur benötigt, um die App einmal zu laden.

In der Praxis: Öffnen Sie die gewünschte Seite, fügen Sie das PNG des Stempels oder der Unterschrift ein, passen Sie es mit den Neigungsreglern an den Winkel des Blattes an, positionieren Sie es und speichern Sie. Sowohl der Vertrag als auch die Stempeldatei bleiben die ganze Zeit bei Ihnen.

Was wir nicht garantieren können — ein ehrlicher Hinweis

Die clientseitige Verarbeitung schützt ein Dokument davor, auf externe Server zu gelangen, doch sie ist kein Schild gegen jede Bedrohung, und das Gegenteil zu versprechen wäre unehrlich.

Rechtskraft. Ein aufgelegtes Stempel- oder Unterschriftsbild ist ein visueller Abdruck, keine qualifizierte elektronische Signatur (QES). Für rechtsverbindliches Signieren verwenden Sie zertifizierte E-Signatur-Werkzeuge; das Einfügen eines Bildes ist praktisch für interne, Arbeits- und Abstimmungsdokumente.

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

Browser-Erweiterungen mit weitreichenden Rechten. Eine Erweiterung mit der Berechtigung „Daten auf allen Websites lesen" kann theoretisch den Inhalt des Tabs sehen. Arbeiten Sie für sensible Dokumente 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 Dateien bei physischem Zugriff von Dritten gelesen werden.

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

Legen Sie einen Stempel oder eine Unterschrift auf, ohne den Vertrag auf einen Server zu laden — pdfredx.com, kostenlos, ohne Registrierung.

Ein Bild auf eine PDF-Seite im Winkel zu „legen" geht auf verschiedene Weisen. Volle Perspektive ist eine projektive Transformation (eine Homographie, eine 3×3-Matrix), die ein Trapez wiedergibt: Die ferne Kante des Objekts erscheint schmaler als die nahe. Ein einfacherer und vorhersehbarerer Weg ist die affine Scherung (Skew): eine Neigung entlang der Achsen ohne Tiefenverzerrung. pdfredX geht den zweiten Weg. Sehen wir uns an, wie das Bild-Einfüge-Werkzeug (insert) im FAB-Editor aufgebaut ist: warum fabric.Image mit skewX/skewY, wie sich die Scherung von echter Perspektive unterscheidet und wie das Ergebnis in die Seite eingebrannt wird.

Die architektonische Wahl: affine Scherung gegen eine projektive Homographie

Echte Perspektive (eine Homographie). Eine projektive Transformation wird durch eine 3×3-Matrix definiert und erfordert eine Division durch eine homogene Koordinate — so wird eine geneigte Ebene in 3D gerendert (CSS matrix3d, WebGL). Sie erzeugt den Trapez-Effekt, ist aber schwerer zu implementieren und im UI zu steuern (man braucht 4 Eckpunkte).

Affine Scherung (der pdfredX-Weg). Fabric.js bietet skewX / skewY — eine Scherung entlang der Achsen. Das ist eine affine Transformation: Parallele Kanten bleiben parallel, es gibt kein Trapez, aber das Objekt „neigt" sich überzeugend in den Winkel der Seite. Die Vorteile sind Vorhersehbarkeit, einfache Steuerung mit zwei Reglern und den Standard-Fabric-Griffen, und all das auf der bereits rasterbasierten Pipeline des Editors. Für die typische Aufgabe (einen Stempel/ein Foto unter die Neigung eines Blattes schieben) reicht die Scherung.

Die Umsetzung im Einzelnen

Laden und Platzieren

function fabInsertImageFromFile(file) {
  const reader = new FileReader();
  reader.onload = ev => {
    fabric.Image.fromURL(ev.target.result, img => {
      const scale = Math.min(maxW / img.width, maxH / img.height, 1); // bis 60 % des Canvas
      img.set({ left: posX, top: posY, scaleX: scale, scaleY: scale, selectable: true });
      img.isInserted = true;
      fabPushUndo();
      fabCanvas.add(img);
      fabCanvas.setActiveObject(img);
      fabShowInsertPanel(img);
    });
  };
  reader.readAsDataURL(file);
}

Das Bild wird lokal in ein dataURL gelesen und wird zu einem gewöhnlichen fabric.Image-Objekt — zentriert, auf 60 % des Canvas skaliert. Das Flag isInserted markiert es als Einfügung. Von dort arbeiten die Standard-Fabric-Steuerelemente: Bewegen, Skalieren an den Ecken, Drehen am oberen Griff.

Die Neigung: skewX / skewY

Das Feld #FAB_INSERT_PANEL bietet zwei Regler, die jeweils die Scherungseigenschaft des Objekts setzen:

function fabSetSkewX(val) {
  const obj = fabCanvas.getActiveObject();
  obj.set('skewX', val);   // affine Scherung entlang X (in Grad)
  fabCanvas.renderAll();
}
// fabSetSkewY — analog für die Y-Achse

Genau hier verläuft die Grenze des Ansatzes: skewX/skewY ist eine Scherung, keine Projektion. Sie neigt das Rechteck zu einem Parallelogramm, aber nicht zu einem Trapez. Für „unter einen Winkel schieben" reicht das; für die Korrektur echter Perspektive (ein schräg fotografiertes Blatt geraderücken) nicht.

Spiegeln, Löschen, Fixieren

function fabInsertFlip(axis) {
  const obj = fabCanvas.getActiveObject();
  obj.set(axis === 'x' ? 'flipX' : 'flipY', !obj[axis === 'x' ? 'flipX' : 'flipY']);
  fabCanvas.renderAll(); fabPushUndo();
}

Das Spiegeln schaltet flipX/flipY um, „Löschen" entfernt das Objekt vom Canvas, „OK" (fabInsertClose) fixiert es und hebt die Auswahl auf. Jede destruktive Aktion läuft über fabPushUndo(), sodass sich die Einfügung rückgängig machen lässt (Strg+Z).

Einbrennen in die Seite

Beim Speichern exportiert saveFab das Canvas mit einem Multiplikator für die native Auflösung in ein Bild:

const multiplier = fabNativeW / fabCanvas.getWidth();
const dataUrl = fabCanvas.toDataURL({ format:'jpeg', quality:0.92, multiplier });
items[fabItemId].editUrl = dataUrl;

Das eingefügte Bild verschmilzt in voller Auflösung mit der Seite zu einem einzigen Raster, sodass es beim Export nicht verschwimmt. Wie bei den anderen Werkzeugen wird origUrl nicht mutiert — Änderungen gehen nur in editUrl.

Kompromisse und Grenzen des Ansatzes

Scherung ≠ Perspektive. Es gibt keinen Trapez-Effekt; ein stark schiefes Bild geraderücken oder eine Textur streng auf 4 Ecken legen kann man mit diesem Werkzeug nicht.

Ein Raster-Ergebnis. Nach dem Speichern ist die Einfügung Teil des Seitenbildes; sie lässt sich nicht mehr als separate Ebene verschieben (dafür den FAB erneut öffnen, bevor Cropper angewendet wird).

Eine Seite auf einmal. Das Werkzeug arbeitet mit der im Editor geöffneten Seite.

Was als Nächstes kommt

Echte 4-Punkt-Perspektive — ein projektiver Warp über matrix3d/WebGL mit ziehbaren Eckgriffen, um schräg fotografierte Blätter geradezurücken und eine Textur exakt auf die Ecken zu legen.

Eine Stempel-Bibliothek — häufig genutzte PNGs (Stempel, Unterschrift) für ein schnelles erneutes Einfügen ohne Dateiauswahl speichern.

Möchten Sie es testen — öffnen Sie eine Seite im Editor auf pdfredx.com, fügen Sie ein PNG ein und spielen Sie mit den Neigungsreglern. Ohne Registrierung, ohne Datei-Upload auf einen Server.