Outil de Filigrane d'Image

Le filigrane d’image ajoute du texte, un logo ou une autre image sur une photo afin d’indiquer l’auteur, la source, la marque, le statut d’usage ou le contexte de publication. On l’utilise pour des photos produit, portfolios, événements, supports de formation, publications sociales et aperçus envoyés avant validation. Tout repose sur l’équilibre: le filigrane doit être assez visible pour limiter la réutilisation non souhaitée, sans masquer le sujet, les détails importants ni donner un rendu amateur. Position, opacité, taille, répétition et rotation doivent être adaptées. Le traitement local dans le navigateur évite d’envoyer l’image originale.

L'application de filigrane s'effectue entièrement sur un canevas 2D. L'image source est dessinée dans un HTMLCanvasElement à ses dimensions pixel natives via ctx.drawImage, puis un texte ou un logo est composé par-dessus à l'aide de ctx.fillText pour les chaînes et d'un second appel drawImage pour les superpositions raster. L'opacité est contrôlée par ctx.globalAlpha, qui se multiplie sur chaque canal alpha suivant ; un globalAlpha de 0,5 appliqué à un PNG à 50 % de transparence donne 25 % sur le pixel final, ce qui est la cause la plus fréquente des rapports de bug « pourquoi mon filigrane est-il invisible ». Le positionnement utilise les transformations standard du canevas : ctx.translate déplace l'origine vers l'ancre de placement (en haut à gauche, en haut à droite, au centre, en bas à droite, ou chaque cellule d'une grille 3×3), ctx.rotate(angle) incline un tampon diagonal autour de cette origine, et l'appel de dessin place la marque sans décalage supplémentaire. Les filigranes en mosaïque utilisent CanvasPattern.createPattern avec la source pivotée et ctx.fillRect sur tout le canevas, ce qui permet à une bande BROUILLON sur toute la page de rester uniformément espacée quelle que soit la taille de la source. Les métriques de police proviennent de ctx.measureText, qui rapporte des pixels CSS, de sorte qu'un libellé de 28 px tenant dans l'aperçu sur un écran 2x peut être tronqué à l'export mobile 1x. L'étape d'export appelle canvas.toBlob avec 'image/png', 'image/jpeg' ou 'image/webp' et un paramètre de qualité optionnel pour les formats avec perte. Le canevas s'exécute à la résolution source, la sortie préserve donc les dimensions pixel d'origine mais ne conserve pas l'orientation EXIF source, le profil ICC ni les autres métadonnées. Les lots de plus de 30 gros fichiers commencent à bloquer le thread UI car toBlob est asynchrone mais la pile de dessin s'exécute de manière synchrone sur le thread principal, ce qui explique qu'une charge de travail importante bénéficie du déplacement du travail de canevas dans un Web Worker avec OffscreenCanvas.

• Pile de composition : ctx.drawImage pour la base, ctx.fillText (ou un second drawImage) pour la marque, ctx.globalAlpha pour la multiplication de la transparence.
• Calcul de l'alpha : globalAlpha se multiplie sur l'alpha existant de chaque pixel, une marque à 0,5 sur un PNG à 0,5 d'alpha rend donc à 0,25, et non 0,5.
• Rotation : ctx.translate vers l'ancre, ctx.rotate(angle) en radians, puis dessin à l'origine (0,0) pour que la transformation reste centrée sur le point de placement.
• Mosaïque : createPattern retourne un CanvasPattern que fillRect peut peindre sur tout le canevas, maintenant un espacement uniforme quelle que soit la taille de la source.
• Métriques de texte : measureText rapporte des pixels CSS, un libellé dimensionné sur un aperçu x2 peut donc déborder du bord de l'image à l'export mobile x1 ; dimensionnez proportionnellement à canvas.width en cas de doute.
• Export : toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) préserve la résolution source mais supprime l'EXIF et l'ICC ; appliquez la rotation selon l'orientation EXIF avant le dessin si la correction portrait/paysage est importante.