Bild-Wasserzeichen-Tool

Ein Bildwasserzeichen legt Text, Logo oder ein anderes Bild über ein Foto, um Quelle, Urheber, Marke oder Nutzungsstatus sichtbar zu machen. Es wird häufig für Produktbilder, Portfolioarbeiten, Eventfotos, Schulungsmaterial, Social-Media-Inhalte und Vorschauen vor der Freigabe verwendet. Entscheidend ist die Balance: Ein Wasserzeichen muss deutlich genug sein, um nicht einfach übersehen zu werden, darf aber Motiv, Texturen oder wichtige Details nicht unbrauchbar machen. Position, Deckkraft, Größe, Wiederholung und Drehung sollten deshalb zum Bildtyp passen. Das Werkzeug verarbeitet Bilder lokal im Browser und eignet sich für schnelle Schutz- und Kennzeichnungsaufgaben. Für Serienbilder lohnt sich außerdem ein einheitlicher Stil: gleiche Platzierung, konsistente Transparenz und ausreichend Abstand zu Rändern verhindern, dass Wasserzeichen abgeschnitten oder störend wirken.

Das Wasserzeichen erfolgt vollständig auf einem 2D-Canvas. Das Quellbild wird über ctx.drawImage in ein HTMLCanvasElement in seinen nativen Pixelabmessungen gezeichnet, dann wird Text oder ein Logo darüber gelegt – mit ctx.fillText für Zeichenketten und einem zweiten drawImage-Aufruf für Raster-Overlays. Die Deckkraft wird über ctx.globalAlpha gesteuert, der auf jeden nachfolgenden Alphakanal multipliziert wird; ein globalAlpha von 0,5 auf einem 50 % transparenten PNG ergibt 25 % im finalen Pixel – die häufigste Ursache für Bug-Meldungen der Art 'Warum ist mein Wasserzeichen unsichtbar'. Die Positionierung nutzt Standard-Canvas-Transformationen: ctx.translate verschiebt den Ursprung zum Platzierungsanker (oben links, oben rechts, Mitte, unten rechts oder jede Zelle eines 3×3-Rasters), ctx.rotate(angle) kippt einen diagonalen Stempel um diesen Ursprung, und der draw-Aufruf platziert die Markierung ohne weiteren Versatz. Gekachelte Wasserzeichen nutzen CanvasPattern.createPattern mit dem rotierten Quellbild und ctx.fillRect über die gesamte Canvas-Fläche – so bleibt ein seitengroßer ENTWURF-Streifen gleichmäßig beabstandet, unabhängig von den Quelldimensionen. Schriftmetriken stammen von ctx.measureText, das CSS-Pixel liefert – ein 28 px Label, das in der Vorschau auf einem 2x-Display passt, kann auf einem 1x-Mobile-Export abgeschnitten werden. Der Export-Schritt ruft canvas.toBlob mit 'image/png', 'image/jpeg' oder 'image/webp' und einem optionalen Qualität-Parameter für die verlustbehafteten Formate auf. Die Canvas läuft in der Quellauflösung, sodass die Ausgabe die ursprünglichen Pixeldimensionen beibehält, aber weder das Quell-EXIF-Orientierungstag, das ICC-Profil noch andere Metadaten enthält. Stapel über ~30 große Dateien beginnen den UI-Thread zu blockieren, da toBlob zwar asynchron ist, der Zeichnungsstapel aber synchron auf dem Hauptthread läuft – ein Grund, warum schwere Workloads davon profitieren, die Canvas-Arbeit in einen Web Worker mit OffscreenCanvas zu verlagern.

• Composite-Stack: ctx.drawImage für die Basis, ctx.fillText (oder ein zweites drawImage) für die Markierung, ctx.globalAlpha für die Transparenzmultiplikation.
• Alpha-Berechnung: globalAlpha multipliziert sich auf den vorhandenen Alpha jedes Pixels, sodass eine 0,5-Markierung auf einem 0,5-Alpha-PNG als 0,25 gerendert wird, nicht als 0,5.
• Rotation: ctx.translate zum Anker, ctx.rotate(angle) in Radiant, dann Zeichnung am Ursprung (0,0), sodass die Transformation zentriert auf dem Platzierungspunkt bleibt.
• Kachelung: createPattern liefert ein CanvasPattern, das fillRect über die gesamte Canvas-Fläche zeichnen kann und den Abstand über alle Quelldimensionen gleichmäßig hält.
• Textmetriken: measureText liefert CSS-Pixel, daher kann ein Label, das auf einer 2x-Vorschau passt, auf einem 1x-Mobile-Export über die Bildkante hinausragen; im Zweifel proportional zu canvas.width skalieren.
• Export: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) erhält die Quellauflösung, entfernt aber EXIF und ICC; bei Bedarf die EXIF-Orientierung vor dem Zeichnen anwenden, wenn Hoch-/Querformat-Korrektheit wichtig ist.