OnlineFreeTools.org
  • Startseite
  • Image editing tools
    • Text-Wasserzeichen — lokal im Browser
    • Farben aus Bild — Palette & Klick-Pipette
    • Bild spiegeln — horizontal oder vertikal
    • Bildrand — Farbe und Breite wählen
    • Bild komprimieren — längste Seite, Qualität & Zielgröße (lokal)
    • Bild zuschneiden & Größe ändern — lokal
    • EXIF von Fotos anzeigen & entfernen — GPS, Kamera, lokal
    • Bildformat-Konverter — PNG JPEG WebP AVIF BMP GIF ICO SVG lokal
    • Graustufen — Foto lokal umwandeln
    • Bilder zusammenfügen — Fotos zu einer Collage
    • Bild optimieren — WebP, AVIF & MozJPEG lokal
    • Logo auf Foto legen — Bilder lokal überlagern
    • Bild ↔ Base64 — lokal kodieren & dekodieren
    • Bilder zu GIF — kurze Animation
    • Bilder zu PDF — eine Seite pro Foto
    • Bilder zu PowerPoint — eine Folie pro Foto
    • Bilder zu Word — DOCX lokal
  • Design-Tools
    • Markenfarben-Token-Pack — HEX/HSL/OKLCH-Skala
    • WCAG-Kontrast-Checker — AA/AAA-Verhältnis
  • Developer tools
    • WWW zu DNS hinzufügen — A/CNAME & Anbieter-Guides
    • CSV ↔ JSON Konverter — Typen, Trennzeichen, lokal
    • HTML-Entitäten kodieren & dekodieren — lokal
    • IndexNow — Bing-URL-Submit, Schlüsselprüfung & Statuscodes
    • Was ist meine IP-Adresse? — IPv4/IPv6 sofort anzeigen
    • JSON-Schema-Validator — draft-07-Pfade, lokal
    • Markdown zu HTML bereinigen — und zurück zu Markdown
    • Compare Two Texts Online — Text Diff Checker
    • HTTP-Header einer Website prüfen — Response-Header anzeigen
    • YAML zu JSON — und zurück zu YAML (Typen, Multi-Doc)
  • Calculators
    • BMI-Rechner — Body-Mass-Index berechnen
    • Gradient berechnen — Multivariables ∇f (partielle Ableitungen)
    • Grenzerlös-Rechner — Formel ΔTR / ΔQ
    • Prozentuale Änderung berechnen — Von Alt- zu Neuwert
    • ROI-Rechner — Return on Investment berechnen
    • Quadratfuß in m² umrechnen — Für Wohnung & Renovierung
  • English
  • 中文
  • Español
  • العربية
  • Português
  • Bahasa Indonesia
  • Français
  • 日本語
  • Русский
  • Deutsch

Werkzeuge

Text-Wasserzeichen — lokal im BrowserWWW zu DNS hinzufügen — A/CNAME & Anbieter-GuidesMarkenfarben-Token-Pack — HEX/HSL/OKLCH-SkalaFarben aus Bild — Palette & Klick-PipetteCSV ↔ JSON Konverter — Typen, Trennzeichen, lokalBild spiegeln — horizontal oder vertikalBMI-Rechner — Body-Mass-Index berechnenGradient berechnen — Multivariables ∇f (partielle Ableitungen)Grenzerlös-Rechner — Formel ΔTR / ΔQProzentuale Änderung berechnen — Von Alt- zu NeuwertROI-Rechner — Return on Investment berechnenHTML-Entitäten kodieren & dekodieren — lokalBildrand — Farbe und Breite wählenBild komprimieren — längste Seite, Qualität & Zielgröße (lokal)Bild zuschneiden & Größe ändern — lokalEXIF von Fotos anzeigen & entfernen — GPS, Kamera, lokalBildformat-Konverter — PNG JPEG WebP AVIF BMP GIF ICO SVG lokalGraustufen — Foto lokal umwandelnBilder zusammenfügen — Fotos zu einer CollageBild optimieren — WebP, AVIF & MozJPEG lokalLogo auf Foto legen — Bilder lokal überlagernBild ↔ Base64 — lokal kodieren & dekodierenBilder zu GIF — kurze AnimationBilder zu PDF — eine Seite pro FotoBilder zu PowerPoint — eine Folie pro FotoBilder zu Word — DOCX lokalIndexNow — Bing-URL-Submit, Schlüsselprüfung & StatuscodesWas ist meine IP-Adresse? — IPv4/IPv6 sofort anzeigenJSON-Schema-Validator — draft-07-Pfade, lokalMarkdown zu HTML bereinigen — und zurück zu MarkdownQuadratfuß in m² umrechnen — Für Wohnung & RenovierungCompare Two Texts Online — Text Diff CheckerWCAG-Kontrast-Checker — AA/AAA-VerhältnisHTTP-Header einer Website prüfen — Response-Header anzeigenYAML zu JSON — und zurück zu YAML (Typen, Multi-Doc)

Logo auf Foto legen — Bilder lokal überlagern

80%
Schnellposition
0.90

Legen Sie ein Logo oder transparentes PNG-Wasserzeichen auf ein Basisbild im Browser — kein Text-Wasserzeichen und kein Zusammenfügen vieler Fotos wie bei Collage. Schritte: Basis + Ebene wählen, Deckkraft und Skalierung setzen, per Drag oder x/y positionieren, Blend-Modus wählen, überlagern und JPEG/WebP/PNG laden. Beispiel: Beispielfoto + halbtransparentes LOGO unten rechts bei 75 % → PNG — alles lokal.

So funktioniert es

Basisfoto und zweites Bild (Logo, Badge oder transparentes PNG) hinzufügen. Deckkraft, Skalierung und Position anpassen — in der Vorschau ziehen oder x/y in Basis-Pixeln eingeben. Blend, Format und JPEG-Hintergrund wählen, überlagern, herunterladen. Alles lokal.

Zeichenregeln

Ausgabe-Leinwand = natürliche Pixelgröße der Basis. Ebene wird skaliert mit Anker oben links bei (x, y) gezeichnet.

  • Leinwand Breite × Höhe = natürliche Basismaße; Basis bei (0, 0).
  • Ebenengröße = natürliche Breite × Höhe × (Skalierung% ÷ 100); Position in Basis-Pixeln, Anker oben links.
  • globalAlpha = Deckkraft ÷ 100; globalCompositeOperation = gewählter Blend; danach zurücksetzen.
  • JPEG: zuerst Hintergrundfarbe füllen, dann Basis und Ebene. PNG/WebP behalten Alpha wo vorhanden.

Beispiel

Beispiel laden: Verlaufsbasis + halbtransparentes LOGO unten rechts bei 75 %, Normal-Blend. Überlagern, PNG behalten, laden. In der Vorschau ziehen; Multiplizieren auf hellem Logo testen.

Typische Einsätze

  • Markenzeichen: Logo auf Produktfotos oder Social-Header legen, ohne Desktop-Editor.
  • Eck-Badges: „NEU“-Sticker mit Deckkraft und 9-Feld-Raster platzieren.
  • Texturen: Graustufen-Ebene mit Multiplizieren oder Screen zum Tönen oder Weichzeichnen.

Frequently asked questions

Werden Bilder hochgeladen?

Nein. Dekodieren, Komponieren und Export laufen im Browser. Netzwerk-Tab prüfen — kein POST.

Unterschied zum Zusammenfügen?

Zusammenfügen reiht mehrere Fotos horizontal, vertikal oder im Raster. Überlagern behält eine Basis und malt eine Ebene mit Deckkraft, Position und Blend darüber.

Was machen die Blend-Modi?

Canvas-Regeln: Normal stapelt; Multiplizieren dunkelt; Screen hellt; Overlay erhöht Kontrast; Abdunkeln/Aufhellen wählen Kanal-Min/Max.

Warum JPEG-Hintergrundfarbe?

JPEG hat keine Transparenz. Vor dem Export füllt das Tool die Leinwand, damit transparente PNG-Bereiche nicht schwarz werden.

Text-Wasserzeichen hier tippen?

Diese Seite überlagert nur Bilddateien. Für Text nutzen Sie das Text-Wasserzeichen-Tool.

Related tools

  • Bilder zusammenfügen — Fotos zu einer Collage
  • Text-Wasserzeichen — lokal im Browser
  • Bild zuschneiden & Größe ändern — lokal

Dieses Tool teilen

In sozialen Netzwerken teilen, Link kopieren oder die Geräte-Teilen-Funktion nutzen.

XFacebookLinkedInRedditWhatsAppTelegram

https://onlinefreetools.org/de/tools/image-overlay

Fragen oder Feedback

Unklar, kaputt oder etwas fehlt? Schreib unten eine Nachricht — wir lesen jede Notiz zu diesen Tools.

E-Mail: dailyonetools@outlook.com

References

  • MDN — globalCompositeOperation
  • MDN — globalAlpha
  • MDN — CanvasRenderingContext2D.drawImage()
OnlineFreeTools.org · Lernprojekt · Iteriert fortlaufend
Über uns·Entwicklungsprotokolle·Datenschutz·Nutzungsbedingungen·Kontakt