 |
Résumé | Ajoute automatiquement des filigranes aux images téléchargées par les utilisateurs |
 |
Dépôt | GitHub - Arkshine/discourse-watermark-image · GitHub |
 |
Guide d’installation | Comment installer un thème ou un composant de thème |
 |
Nouveau sur les thèmes Discourse ? | Guide de démarrage pour l’utilisation des thèmes Discourse |
Installer ce composant de thème
Description
Ce composant de thème ajoute automatiquement des filigranes aux images téléchargées par les utilisateurs. Vous pouvez utiliser une image ou un code QR comme filigrane, avec de nombreuses options de personnalisation pour la position, l’apparence et les motifs de répartition.
Le composant offre un contrôle granulaire via les paramètres par catégorie et par groupe d’utilisateurs, vous permettant d’adapter le comportement du filigranage aux besoins de votre communauté.
Veuillez consulter la section Notes importantes avant la mise en œuvre.
Fonctionnalités
- Traitement haute performance grâce à WebAssembly et aux Web Workers
- Prise en charge complète des formats d’image (PNG, JPEG, BMP, ICO, TIFF, WEBP)
- Génération dynamique de filigranes sous forme de code QR
- Options de taille flexibles (relative ou absolue)
- Système de positionnement polyvalent
- Personnalisation avancée de l’apparence (opacité, rotation, échelle, marge, etc.)
- Modes de fusion multiples
- Options de répartition en motif (unique, grille, diagonale, aléatoire)
- Paramètres spécifiques par catégorie et par groupe d’utilisateurs
- Aperçu en direct dans le panneau de paramètres
Paramètres
| Paramètre | Description |
|---|---|
image |
L’image à utiliser comme filigrane. Formats pris en charge : PNG, JPEG, BMP, ICO, TIFF, WEBP. Par défaut : "" |
size_mode |
Façon dont la taille du filigrane est calculée : - relative : La taille est relative à la largeur de l’image cible.- absolute : Appliquée à sa taille originale.Par défaut : "relative" |
relative_width |
La largeur du filigrane par rapport à la largeur de l’image cible (en %). Ne s’applique que lorsque le mode de taille du filigrane est défini sur relative.Plage : 1-100 Par défaut : 10 |
absolute_scale |
Facteur d’échelle pour la taille originale du filigrane (utilisé uniquement en mode absolu). Minimum : 0.01 Par défaut : 1 |
max_size |
Taille maximale en pourcentage des dimensions de l’image. Plage : 1-100 Par défaut : 50 |
position |
Position du filigrane : top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-rightPar défaut : "bottom-right" |
margin_x |
Marge horizontale par rapport au bord (en % de l’image cible) Par défaut : 0 |
margin_y |
Marge verticale par rapport au bord (en % de l’image cible) Par défaut : 0 |
opacity |
Opacité du filigrane. Plage : 1-100 Par défaut : 100 |
rotate |
Angle de rotation. Plage : -360 à 360 degrés Par défaut : 0 |
blend_mode |
Façon dont le filigrane se fond avec l’image : normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken. Par défaut : "normal" |
pattern |
Motif de répétition du filigrane : single, grid, diagonal, randomPar défaut : "single" |
pattern_allow_partial |
Autoriser les filigranes partiels sur les bords de l’image Par défaut : true |
pattern_max_count |
Nombre maximum de répétitions du filigrane (0 pour infini) Par défaut : 50 |
pattern_spacing |
Espacement entre les filigranes répétés (en % de l’image cible) Par défaut : 15 |
qrcode_enabled |
Activer le filigrane sous forme de code QR Par défaut : false |
qrcode_text |
Texte à encoder dans le code QR. Prend en charge les espaces réservés : {homepage}, {username}, {topic_url}Par défaut : "" |
qrcode_color |
Couleur du code QR (hexadécimal ou variable CSS) Par défaut : "var(--primary)" |
qrcode_background_color |
Couleur d’arrière-plan du code QR (hexadécimal ou variable CSS) Par défaut : "var(--secondary)" |
qrcode_quiet_zone |
Largeur de la bordure d’espace blanc autour du code QR (0-10 modules) Par défaut : 2 |
qrcode_error_correction |
Niveau de correction d’erreur : Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)Plus d’informations sur les niveaux de correction d’erreur disponibles ici. Par défaut : "Medium" |
categories |
Catégories où le filigrane doit être appliqué. Par défaut : "" |
groups |
Groupes auxquels le filigrane doit être appliqué. Par défaut : "0" |
skip_small_images |
Ignorer le filigranage si l’image est inférieure à min_image_dimensions.Par défaut : false |
min_image_dimensions |
Dimensions minimales requises (largeur x hauteur) Par défaut : "200x200" |
allow_non_supported_uploads |
Autoriser la poursuite des téléchargements d’images même si le format n’est pas pris en charge Par défaut : false |
Types de filigranes
Image
Le composant prend en charge plusieurs formats d’image : PNG, JPEG, BMP, ICO, TIFF et WEBP.
Consultez la section FAQ pour des informations importantes sur les limitations de prise en charge des formats.
Code QR
Générez des codes QR dynamiques avec un contenu personnalisable en utilisant ces variables :
{homepage}- L’URL de la page d’accueil{username}- Le nom d’utilisateur de l’utilisateur{topic_url}- L’URL du sujet
Important : Lors de la personnalisation des filigranes de code QR, tenez compte du contraste et de la taille. Des ratios de contraste faibles ou un style excessif peuvent rendre les codes QR illisibles. Testez toujours vos filigranes de code QR avec des applications de lecture.
Aperçu en temps réel
Le panneau de paramètres inclut une fonctionnalité d’aperçu en temps réel, vous permettant de voir instantanément comment votre configuration de filigrane affecte une image d’échantillon.
La fenêtre d’aperçu offre plusieurs fonctionnalités interactives :
- Fenêtre d’aperçu redimensionnable et déplaçable
- Option pour charger une image d’échantillon aléatoire
- Prise en charge du téléchargement de vos propres images de test depuis votre appareil
Sur ordinateur, elle s’ouvre automatiquement. Vous pouvez également l’ouvrir via le bouton en bas de la page :
Notes importantes
-
Les images originales ne sont pas conservées
Les filigranes sont appliqués avant le téléchargement vers le serveur, et les images originales ne sont pas conservées. Testez soigneusement vos paramètres de filigrane avant de les déployer en production. -
Si vous testez dans le panneau d’administration, faites attention de ne pas valider immédiatement vos paramètres. Je recommande de créer un groupe ou une catégorie pour plus de sécurité.
FAQ
Pourquoi les formats d’image sont-ils limités ?
Bien que Discourse convertisse tous les téléchargements en JPEG, ce filigranage de composant de thème (TC) se produit avant le téléchargement sur le format original, en utilisant des bibliothèques spécifiques de traitement d’image. Bien que le filigranage après téléchargement soit possible, cela nécessiterait plusieurs cycles de téléchargement/téléchargement et affecterait l’expérience de l’éditeur. Je explore encore des améliorations pour ce flux de travail.
Pourquoi le filigranage textuel n’est-il pas pris en charge ?
Le filigranage textuel nécessiterait de nombreuses options de configuration (choix de la police, style, etc.) qui seraient difficiles à mettre en œuvre efficacement sans une interface dédiée. Les filigranes d’image offrent plus de flexibilité et peuvent être créés à l’aide d’outils de conception existants.
Feuille de route
Les plans de développement futurs pourraient inclure :
- Plusieurs profils de filigrane [1]
- Conservation des images originales [2]
- Filigranage après téléchargement
Crédits
Ce composant de thème est propulsé par :
- Photon: Une bibliothèque de traitement d’image WebAssembly
- QR Code Generator: Fork modifié avec prise en charge de WebAssembly.
L’entrée de téléchargement est partiellement prise en charge avec le type de paramètres d’objet – cela ne peut pas être réalisé dans un TC pour le moment. ↩︎
Pourrait nécessiter le développement d’un plugin. ↩︎
