 |
Zusammenfassung | Fügt automatisch Wasserzeichen zu hochgeladenen Benutzerbildern hinzu |
 |
Repository | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Installationsanleitung | So installieren Sie ein Theme oder eine Theme-Komponente |
 |
Neu bei Discourse-Themes? | Anfängerleitfaden zur Verwendung von Discourse-Themes |
Dieses Theme-Komponente installieren
Beschreibung
Diese Theme-Komponente fügt automatisch Wasserzeichen zu von Benutzern hochgeladenen Bildern hinzu. Sie können entweder ein Bild oder einen QR-Code als Wasserzeichen verwenden, mit umfangreichen Anpassungsoptionen für Position, Erscheinungsbild und Verteilungsmuster.
Die Komponente bietet eine granulare Steuerung durch Kategorien- und Benutzergruppen-Einstellungen, sodass Sie das Wasserzeichenverhalten an die Bedürfnisse Ihrer Community anpassen können.
Bitte lesen Sie den Abschnitt Wichtige Hinweise vor der Implementierung.
Funktionen
- Hochleistungsverarbeitung mit WebAssembly und Web Workers
- Umfassende Unterstützung für Bildformate (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Dynamische Generierung von QR-Code-Wasserzeichen
- Flexible Größenoptionen (relativ oder absolut)
- Vielseitiges Positionierungssystem
- Erweiterte Anpassungsmöglichkeiten für das Erscheinungsbild (Deckkraft, Rotation, Skalierung, Rand, usw.)
- Verschiedene Mischmodi
- Optionen für Verteilungsmuster (einzelnes, Gitter, diagonal, zufällig)
| | | |
| - | - | - |
| Einstellungen für Kategorien und Benutzergruppen |
| Live-Vorschau im Einstellungsbereich |
Einstellungen
| Einstellung | Beschreibung |
|---|---|
image |
Das als Wasserzeichen zu verwendende Bild. Unterstützte Formate: PNG, JPEG, BMP, ICO, TIFF, WEBP. Standard: "" |
size_mode |
Wie die Größe des Wasserzeichens berechnet wird: - relative: Die Größe ist relativ zur Breite des Zielbildes.- absolute: Wird in seiner ursprünglichen Größe angewendet.Standard: "relative" |
relative_width |
Die Breite des Wasserzeichens relativ zur Breite des Zielbildes (in %). Gilt nur, wenn der Wasserzeichengrößenmodus auf relative eingestellt ist.Bereich: 1-100 Standard: 10 |
absolute_scale |
Skalierungsfaktor für die ursprüngliche Wasserzeichengröße (nur im absoluten Modus verwendet). Minimum: 0.01 Standard: 1 |
max_size |
Maximale Größe als Prozentsatz der Bildabmessungen. Bereich: 1-100 Standard: 50 |
position |
Position des Wasserzeichens: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightStandard: "bottom-right" |
margin_x |
Horizontaler Rand vom Rand (in % des Zielbildes) Standard: 0 |
margin_y |
Vertikaler Rand vom Rand (in % des Zielbildes) Standard: 0 |
opacity |
Deckkraft des Wasserzeichens. Bereich: 1-100 Standard: 100 |
rotate |
Rotationswinkel. Bereich: -360 bis 360 Grad Standard: 0 |
blend_mode |
Wie das Wasserzeichen mit dem Bild gemischt wird: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. Standard: "normal" |
pattern |
Wiederholungsmuster des Wasserzeichens: single, grid, diagonal, randomStandard: "single" |
pattern_allow_partial |
Teilweise Wasserzeichen an den Bildrändern zulassen Standard: true |
pattern_max_count |
Maximale Anzahl der Wasserzeichenwiederholungen (0 für unendlich) Standard: 50 |
pattern_spacing |
Abstand zwischen wiederholten Wasserzeichen (in % des Zielbildes) Standard: 15 |
qrcode_enabled |
QR-Code-Wasserzeichen aktivieren Standard: false |
qrcode_text |
Im QR-Code zu kodierender Text. Unterstützt Platzhalter: {homepage}, {username}, {topic_url}Standard: "" |
qrcode_color |
Farbe des QR-Codes (Hex oder CSS-Variable) Standard: "var(--primary)" |
qrcode_background_color |
Hintergrundfarbe des QR-Codes (Hex oder CSS-Variable) Standard: "var(--secondary)" |
qrcode_quiet_zone |
Breite des weißen Randes um den QR-Code (0-10 Module) Standard: 2 |
qrcode_error_correction |
Fehlerkorrekturstufe: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Weitere Informationen zu Fehlerkorrekturstufen finden Sie hier. Standard: "Medium" |
categories |
Kategorien, in denen das Wasserzeichen angewendet werden soll. Standard: "" |
groups |
Gruppen, auf die das Wasserzeichen angewendet werden soll. Standard: "0" |
skip_small_images |
Wasserzeichen überspringen, wenn das Bild unter min_image_dimensions liegt.Standard: false |
min_image_dimensions |
Erforderliche Mindestabmessungen (Breite x Höhe) Standard: "200x200" |
allow_non_supported_uploads |
Bilduploads auch dann zulassen, wenn das Format nicht unterstützt wird Standard: false |
Wasserzeichentypen
Bild
Die Komponente unterstützt mehrere Bildformate: PNG, JPEG, BMP, ICO, TIFF und WEBP.
Weitere wichtige Informationen zu Einschränkungen der Formatunterstützung finden Sie im FAQ-Abschnitt.
QR-Code
Generieren Sie dynamische QR-Codes mit anpassbarem Inhalt unter Verwendung dieser Variablen:
{homepage}- Die URL der Homepage{username}- Der Benutzername des Benutzers{topic_url}- Die URL des Themas
Wichtig: Beim Stylen von QR-Code-Wasserzeichen sollten Sie den Kontrast und die Größe berücksichtigen. Schlechte Kontrastverhältnisse oder übermäßiges Styling können QR-Codes unlesbar machen. Testen Sie Ihre QR-Code-Wasserzeichen immer mit Scan-Apps.
Echtzeit-Vorschau
Der Einstellungsbereich verfügt über eine Echtzeit-Vorschau-Funktion, mit der Sie sofort sehen können, wie Ihre Wasserzeichenkonfiguration ein Beispielbild beeinflusst.
Das Vorschaufenster bietet mehrere interaktive Funktionen:
- Vergrößerbares und verschiebbares Vorschaufenster
- Option zum Laden eines zufälligen Beispielbildes
- Unterstützung für das Hochladen eigener Testbilder von Ihrem Gerät
Auf dem Desktop wird es automatisch geöffnet. Sie können es auch über die Schaltfläche am unteren Rand der Seite öffnen:
Wichtige Hinweise
-
Originalbilder werden nicht gespeichert
Wasserzeichen werden vor dem Server-Upload angewendet, und Originalbilder werden nicht beibehalten. Testen Sie Ihre Wasserzeicheneinstellungen gründlich, bevor Sie sie in der Produktion einsetzen. -
Wenn Sie im Administrationsbereich testen, achten Sie darauf, Ihre Einstellungen nicht sofort zu validieren. Es wird empfohlen, zum Sicherheit eine Gruppe oder Kategorie zu erstellen.
FAQ
Warum sind Bildformate begrenzt?
Während Discourse alle Uploads in JPEG konvertiert, erfolgt diese TC-Wasserzeichenanwendung vor dem Upload im ursprünglichen Format unter Verwendung spezifischer Bildverarbeitungs-Bibliotheken. Eine Wasserzeichenanwendung nach dem Upload ist zwar möglich, würde jedoch mehrere Upload-/Download-Zyklen erfordern und die Composer-Erfahrung beeinträchtigen. Ich untersuche weiterhin Verbesserungen für diesen Arbeitsablauf.
Warum wird Textwasserzeichen nicht unterstützt?
Textwasserzeichen würden umfangreiche Konfigurationsoptionen (Schriftartauswahl, Styling, usw.) erfordern, die ohne eine dedizierte Schnittstelle schwierig effektiv umzusetzen wären. Bildwasserzeichen bieten mehr Flexibilität und können mit vorhandenen Gestaltungswerkzeugen erstellt werden.
Roadmap
Zukünftige Entwicklungspläne könnten Folgendes umfassen:
- Mehrere Wasserzeichenprofile [1]
- Beibehaltung von Originalbildern [2]
- Wasserzeichenanwendung nach dem Upload
Credits
Diese Theme-Komponente wird unterstützt durch:
- Photon: Eine WebAssembly-Bildverarbeitungs-Bibliothek
- QR Code Generator: Modifiziertes Fork mit WebAssembly-Unterstützung.
Die Upload-Eingabe wird teilweise mit dem Objekt-Einstellungstyp unterstützt – dies kann derzeit in einer TC nicht durchgeführt werden. ↩︎
Erfordert möglicherweise die Entwicklung eines Plugins. ↩︎
