Das SK Wasserzeichen‑Tool ist ein interaktives Joomla‑6‑Modul, mit dem Bilder direkt im Browser optimiert, mit Text oder PNG‑Wasserzeichen versehen und anschließend komprimiert gespeichert werden können. Es eignet sich ideal für Fotografien, Webgrafiken, Produktbilder oder Social‑Media‑Material.
Wasserzeichen‑Tool
Funktionen im Überblick
- Text‑Wasserzeichen mit frei wählbarer Schriftart (Belgium, Standard, SK‑Branding)
- PNG‑Wasserzeichen (z. B. Logos)
-
Bild‑Optimierung
:
- Abrundung der Ecken (0–100 px)
- Komprimierung (10–100 %)
- Automatische Skalierung auf 800 px Breite (abschaltbar)
- Vorschau‑Zoom und Hintergrund‑Transparenz
- Drag‑&‑Drop Positionierung des Wasserzeichens
- Export als JPG mit Komprimierung
- Hard‑Reset zum Zurücksetzen aller Einstellungen
Einbau in Joomla und Bedienungsanleitung:
Installation des Moduls (Joomla 6)
Das Modul wird als ZIP‑Datei installiert.
- Backend öffnen: Erweiterungen → Installieren
- ZIP‑Datei auswählen: mod_sk_watermark.zip
-
Nach der Installation:
- Gehe zu Erweiterungen → Module
- Suche nach: SK Wasserzeichen‑Tool
- Modul öffnen und eine Position wählen (z. B. content-top )
- Modul veröffentlichen
Hinweis: Das Modul benötigt keine zusätzlichen Plugins oder Bibliotheken.
Bedienungsanleitung
1. Bild laden
Öffne das erste Akkordeon „Bild“. Klicke auf Bild auswählen und lade ein JPG oder PNG hoch.
2. Text‑Wasserzeichen
- Text eingeben (Standard: „Bild KI sk‑reg.de“)
- Schriftart wählen (Belgium ist voreingestellt)
- Schriftgröße einstellen (8–16 px)
- Textfarbe und Transparenz anpassen
- Hintergrundfarbe und Transparenz einstellen
3. PNG‑Wasserzeichen
Optional kann ein PNG‑Logo geladen werden. Die Skalierung erfolgt über den Schieberegler (10–200 %).
4. Bild‑Optimierung
- Abrundung: Ecken des Bildes abrunden (Standard: 20 px)
- Komprimierung: Qualitätsstufe für den Export (Standard: 88 %)
- Auto‑Skalierung: Bild wird beim Export auf 800 px Breite reduziert
5. Vorschau & Hintergrund
- Hintergrundfarbe der Vorschau ändern
- Transparenz einstellen
- Zoom der Vorschau (0–200 %)
- Position des Wasserzeichens wählen (z. B. unten links)
6. Wasserzeichen anzeigen
Mit einem Klick auf Wasserzeichen anzeigen wird die Vorschau aktualisiert.
7. Speichern
Mit Speichern unter… wird das Bild als JPG exportiert – inklusive:
- Text‑Wasserzeichen
- PNG‑Wasserzeichen
- Abrundung
- Komprimierung
- Auto‑Skalierung (falls aktiviert)
Drag‑&‑Drop Positionierung
Das Wasserzeichen (Text oder PNG) kann direkt mit der Maus verschoben werden. Der Hintergrund bleibt stabil und wird nicht mitbewegt.
Hard‑Reset
Setzt alle Einstellungen zurück:
- Schriftart zurück auf Belgium
- Text zurück auf Standard
- Bild‑Optimierung zurück auf Standardwerte
- Vorschau zurück auf Weiß
- Zoom zurück auf 0 %
Fehlerbehebung
- Kein Export möglich: Stelle sicher, dass ein Bild geladen wurde.
- PNG wird nicht angezeigt: Nur echte PNG‑Dateien mit Transparenz werden unterstützt.
- Modul erscheint nicht: Position prüfen und Modul veröffentlichen.
-
ZIP‑Fehler bei Installation:
Die Datei
mod_sk_watermark.xmlmuss im Modul‑Ordner liegen.
Hinweis
Das Wasserzeichen‑Tool arbeitet vollständig lokal im Browser. Es werden keine Daten übertragen oder gespeichert.
Download unter Module:Radius-Standard von 20px auf 12px
Der Standardwert steckt an drei Stellen im Code. Wenn du alle drei auf 12 änderst, ist 12px der Standard, auch nach dem Hard-Reset.
1 Der Regler im HTML
<input type="range" id="wm-rounding" min="0" max="100" value="12">
<div class="wm-value">Abrundung: <span id="wm-rounding-value">12px</span></div>
2 Das Vorschau-CSS
.wm-preview-inner {
border-radius: 12px;
}
3 Die Hard-Reset-Funktion
previewInner.style.borderRadius = "12px";
roundingRange.value = 12;
roundingValue.textContent = "12px";
Der Reset ruft sich am Ende des Skripts selbst einmal auf ( hardReset(); unter „Initialer Reset“). Deshalb ist Punkt 3 der entscheidende : Wenn du nur das HTML oder das CSS änderst, überschreibt der Reset beim Laden alles wieder mit 20.
Der Export (Speichern unter) liest den Wert direkt aus dem Regler, dort musst du nichts ändern.