§ Page
Filigo
README
Filigo
Filigo est un outil statique développé avec Hugo pour ajouter un filigrane personnalisé (texte répété ou unique) sur des images ou des documents PDF.
Inspiré par l’outil officiel filigrane.beta.gouv.fr, Filigo corrige ses limitations en offrant une prévisualisation visuelle en temps réel, un contrôle précis de la disposition, et un traitement 100 % local dans le navigateur via l’API Canvas HTML5. Aucun fichier n’est envoyé à un serveur tiers, garantissant une confidentialité totale.

Exemple complet avec un fichier vide

Fonctionnalités principales
- Formats pris en charge : Glisser-déposer ou sélection d’images (JPG, PNG, WebP) ou de fichiers PDF multi-pages.
- Texte personnalisable : Saisie sur une ou deux lignes (ex :
NE PAS DIFFUSER/Copie du 12/09/2026). - Dispositions flexibles :
- Mode répété (pavage diagonal) avec espacement réglable.
- Mode lignes : le texte se répète horizontalement sur toute la largeur, ligne par ligne, avec espacement vertical et horizontal réglables.
- Mode unique avec positionnement fin sur une grille de 9 emplacements (coins, bords, centre).
- Gestion avancée des couleurs :
- Filigrane unique : application d’un dégradé fluide entre les couleurs choisies.
- Filigrane répété : alternance des couleurs définies à chaque occurrence.
- Effet vague cinématique : Option d’ondulation du texte selon une fonction sinusoïdale (amplitude et longueur d’onde personnalisables).
- Réglages précis : Ajustement de la taille, de l’opacité et de l’inclinaison.
- Support complet des PDF : Navigation page par page dans l’aperçu et application automatique du filigrane sur l’ensemble des pages lors du téléchargement.
- Interface moderne : Thème sombre permanent et design épuré.
Structure du projet
.
├── hugo.toml # Configuration du site (titre, description)
├── content/
│ └── _index.md # Contenu de la page d'accueil
├── layouts/
│ ├── _default/
│ │ └── baseof.html # Squelette HTML commun, imports CSS/JS
│ └── index.html # Page outil (upload, aperçu, contrôles)
├── static/
│ ├── css/style.css # Style global et thème sombre
│ ├── robots.txt # Directive anti-IA
│ ├── js/watermark.js # Logique du filigrane (Canvas, PDF)
│ └── favicon.svg # Icône vectorielle du site
├── LICENSE # Licence MIT
├── .gitignore
└── .gitlab-ci.yml # Pipeline CI/CD pour GitLab Pages
Dépendances
Le rendu et la génération des PDF utilisent deux bibliothèques chargées depuis un CDN (cdnjs) directement dans le navigateur de l’utilisateur :
- pdf.js — pour afficher/rasteriser les pages du PDF
- pdf-lib — pour reconstruire un PDF filigrané téléchargeable
Rien n’est envoyé sur un serveur : le PDF est lu, filigrané et régénéré entièrement côté client (voir layouts/_default/baseof.html pour les balises <script> correspondantes).
Personnalisation
À retrouver dans le code source de l’outil
| Élément | Fichier |
| Couleurs et style général | static/css/style.css |
| Logique du filigrane | static/js/watermark.js |
| Structure de la page | layouts/index.html et layouts/_default/baseof.html |
| Titre / description du site | hugo.toml |
| Icône du site | static/favicon.svg |
Licence
Distribué sous la licence MIT.
Dernière mise-à-jour : 10 octobre 2026
Détails de la dernière mise-à-jour
- Ajout de traduction en
anglais,allemand,espagnoletesperanto - Amélioration de la bonction filigrane en ligne