Créez une disposition de filigrane répété en mosaïque
Une image de 300×200 avec des motifs de 100×50, des espacements de 20 et 10 et une inclinaison de 30° demande 15 positions, motifs partiels du bord compris. Saisissez canevas, motif, espacements et angle pour obtenir le centre de chaque copie. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Largeur de la toile
- 300
- Hauteur de la toile
- 200
- Largeur du carreau
- 100
- Hauteur de la mosaïque
- 50
- Espacement X
- 20
- Espacement Y
- 10
- Quantité
- 15
Créez une grille complète de filigranes répétés sans estimer le nombre de copies nécessaires au-delà des bords visibles. Indiquez les dimensions du canevas et de la tuile, les espacements horizontal et vertical, puis l’angle de rotation. Le calculateur renvoie des coordonnées centrales stables pour chaque tuile pivotée qui touche le canevas, y compris les tuiles partielles aux bords. La disposition est centrée, utilise des repères de ligne et de colonne cohérents et s’intègre directement à un pipeline d’image, SVG, PDF ou Canvas.
Définissez le canevas et la tuile de filigrane
Commencez par la largeur et la hauteur du canevas de destination, puis saisissez la largeur et la hauteur non pivotées d’une tuile de filigrane. Toutes les dimensions emploient la même unité, généralement le pixel, mais elles peuvent aussi être exprimées en points ou dans une autre unité si votre moteur de rendu suit un système différent. La tuile doit tenir dans le canevas dans les deux dimensions.
Cette validation repère les inversions accidentelles, les mauvaises conversions d’unités et les demandes qui produiraient un seul tampon surdimensionné au lieu d’un motif répété. Définissez ensuite les espacements horizontal et vertical. Il s’agit des intervalles entre les bords des tuiles le long des axes propres à la grille, et non de distances absolues à l’écran après rotation.
Une valeur nulle place les tuiles bord à bord; une valeur supérieure allège le motif. L’origine renvoyée correspond au centre du canevas. La ligne zéro et la colonne zéro désignent la tuile centrée sur cette origine et fournissent à votre code un repère stable lorsque les dimensions, l’espacement ou l’angle changent.
Comprenez la rotation et la couverture des bords
L’angle fait pivoter tout le réseau dans le sens horaire autour du centre du canevas. Toute valeur finie en degrés est acceptée puis ramenée à un tour, si bien que moins trente degrés et trois cent trente degrés donnent la même disposition. La rotation agrandit la zone à couvrir: une tuile dont le centre se trouve hors de l’image peut encore présenter un coin visible à l’intérieur.
Le calculateur projette donc le canevas sur les axes pivotés de la grille, construit un ensemble borné de lignes et de colonnes candidates, puis compare chaque rectangle de tuile pivoté au rectangle du canevas. Une position est renvoyée dès que ces rectangles se touchent ou se chevauchent. Cette règle d’intersection exacte évite d’oublier des tuiles aux coins et d’émettre des tuiles lointaines qu’une simple boîte englobante surdimensionnée inclurait.
Les tuiles partielles sont voulues; laissez le moteur de destination les rogner au canevas.
Effectuez le rendu et reproduisez la disposition
Traitez les positions dans l’ordre renvoyé, des identifiants de ligne les plus faibles aux plus élevés, puis des colonnes les plus faibles aux plus élevées. Les identifiants de ligne et de colonne facilitent le débogage, l’alternance d’opacité ou la sélection d’une tuile sur deux, mais ils ne remplacent pas les coordonnées. Les valeurs numériques sont arrondies à six décimales afin que les résultats sérialisés restent stables tout en conservant une précision sous-pixel pour les sorties haute résolution.
Pour un motif en quinconce, une variation aléatoire, des rotations individuelles ou une mesure de texte, appliquez ces transformations après réception de la grille régulière ou utilisez un compositeur spécialisé.
Cas d’usage
Protégez les images d’aperçu
Répétez un logo sur des aperçus de produits, des épreuves ou des portfolios afin qu’un seul recadrage ne supprime pas toutes les marques.
Générez des instructions de rendu
Créez des centres stables pour Canvas, SVG, PDF ou des pipelines d’image serveur sans dupliquer les calculs de disposition.
Uniformisez les exportations
Réutilisez les mêmes règles d’angle et d’espacement sur plusieurs tailles de canevas tout en conservant un motif centré et déterministe.
Questions fréquentes
Les coordonnées x et y indiquent-elles les coins ou les centres?
Elles indiquent les centres des tuiles. Faites pivoter et dessinez chaque filigrane autour de ce point avec l’angle renvoyé.
Pourquoi certains centres sont-ils hors du canevas?
Une tuile pivotée peut croiser le canevas même si son centre est dehors. Ces positions couvrent les bords et les coins et doivent être rognées au rendu.
Dans quel sens l’angle est-il appliqué?
Les angles positifs tournent dans le sens horaire du système d’image habituel, où x augmente vers la droite et y vers le bas.
L’espacement peut-il être nul?
Oui. Zéro fait coïncider les bords voisins sur cet axe de grille. L’espacement ne peut pas être négatif.
Le motif du filigrane peut-il être plus grand que l'image ?
Non. Le motif doit tenir dans le canevas dans les deux sens. Cette règle repère une largeur et une hauteur inversées, une conversion d'unité erronée ou une demande qui produirait un seul grand tampon au lieu d'un motif répété.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/image/watermark-tile-repeat-layout \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}'const res = await fetch("https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/watermark-tile-repeat-layout",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"canvas_width":800,"canvas_height":600,"tile_width":160,"tile_height":80,"spacing_x":40,"spacing_y":30,"angle_deg":-30}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/watermark-tile-repeat-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"canvas_width": 800,
"canvas_height": 600,
"tile_width": 160,
"tile_height": 80,
"spacing_x": 40,
"spacing_y": 30,
"angle_deg": -30
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.watermark_tile_repeat_layout",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
max_mb | 15 |
max_megapixels | 12 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Comprenez la rotation et la couverture des bords
Les coordonnées décrivent les centres, car les bibliothèques matricielles, les transformations SVG et CSS et les API Canvas gèrent toutes correctement une rotation centrée.
Effectuez le rendu et reproduisez la disposition
Pour chaque enregistrement, placez le centre du filigrane en center_x et center_y, faites-le pivoter de angle_deg autour de ce centre et dessinez-le avec la largeur et la hauteur fournies. L’algorithme n’utilise ni décalage aléatoire, ni horloge, ni état stocké, ni ressource réseau: des entrées identiques produisent toujours le même JSON. Le tarif de l’API est de $0.002 par calcul, quel que soit le nombre de positions dans la limite de sécurité.
Questions techniques
Combien coûte l’appel API?
Chaque calcul coûte $0.002. Le résultat contient la liste complète des positions dans la limite de sécurité documentée.
Que se passe-t-il si la tuile dépasse le canevas?
La demande renvoie une erreur invalid_input, car une tuile répétée ne doit dépasser ni la largeur ni la hauteur du canevas.