ForHosting KIT · Images

Créez un collage et calculez la position des cellules

Le calculateur de mise en page de collage transforme une liste de dimensions ordonnée par lignes en une géométrie de grille complète.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Il détermine la largeur nécessaire pour chaque colonne et la hauteur de chaque ligne, puis renvoie la taille du canevas et le rectangle exact de chaque cellule. Utilisez le résultat pour placer précisément des images dans HTML, canvas, SVG, des outils de conception ou une chaîne de traitement, sans additionner manuellement les décalages ni risquer de superposer des cellules.

Préparez les dimensions dans l’ordre des lignes

Fournissez une paire largeur-hauteur pour chaque image, de gauche à droite sur la première ligne, puis de la même manière sur les lignes suivantes. Les champs rows et cols définissent la forme de la grille : leur produit doit donc correspondre exactement au nombre d’images. Ce contrôle strict évite une erreur fréquente dans les collages, à savoir laisser une cellule vide ou ignorer une image supplémentaire parce que la forme prévue et la liste source diffèrent. Les largeurs et hauteurs doivent être des nombres finis positifs. Elles peuvent être entières ou décimales, ce qui permet de travailler en pixels, points, millimètres ou dans toute autre unité cohérente. Ne mélangez pas les unités dans une même requête, car l’algorithme considère tous les nombres dans un seul système de coordonnées. La réponse conserve les dimensions d’origine avec chaque cellule calculée afin que vous puissiez retrouver l’image correspondante et décider ensuite de son ajustement, de son recadrage ou de son alignement.

Comprenez le calcul de la taille des cellules

Chaque colonne adopte la plus grande largeur source qu’elle contient, et chaque ligne la plus grande hauteur de ses images. Chaque cellule située à leur intersection possède donc la largeur de la colonne et la hauteur de la ligne. Les limites restent alignées et toute image tient dans sa cellule à ses dimensions d’origine. Le calculateur construit ensuite les décalages x en additionnant les largeurs des colonnes précédentes, et les décalages y en additionnant les hauteurs des lignes précédentes. La première cellule commence à zéro, zéro. La largeur totale du collage est la somme des largeurs de colonne ; sa hauteur totale est la somme des hauteurs de ligne. Cette méthode crée une grille rectangulaire compacte sans inventer de taille de canevas cible ni de règle de redimensionnement. Elle calcule uniquement la géométrie : elle n’étire, ne recadre, ne fait pivoter et ne centre aucune image. Vous appliquez ensuite ces choix visuels à partir du rectangle et des dimensions source renvoyés.

Exploitez le résultat dans votre chaîne de rendu

Parcourez le tableau cells dans le même ordre que les images d’entrée. Chaque élément comprend son indice, sa ligne et sa colonne à partir de zéro, son origine x et y, la largeur et la hauteur de sa cellule, ainsi que les dimensions d’origine. Un moteur canvas peut dessiner dans chaque rectangle ; un générateur CSS peut convertir column_widths et row_heights en pistes explicites ; et un générateur SVG peut créer des rectangles de découpe avant d’insérer les images. La sortie étant déterministe et indépendante de l’environnement, une requête identique produit la même géométrie dans un navigateur, pendant une compilation ou via l’API. Pour centrer sans redimensionner, soustrayez les dimensions de l’image à celles de la cellule, puis divisez chaque différence par deux. Pour un comportement de type cover ou contain, calculez l’échelle à partir des rapports de forme. La séparation de ces règles préserve un calcul prévisible et réutilisable.

Cas d’usage

Composez un collage sur canvas

Calculez des rectangles de destination sans chevauchement avant de dessiner des images de tailles différentes sur un même canevas.

Générez des pistes CSS Grid explicites

Transformez les largeurs et hauteurs renvoyées en un modèle de grille adapté à la plus grande image de chaque piste.

Préparez une planche-contact SVG

Créez les cellules et le viewBox global avant d’ajouter des images, des légendes, des chemins de découpe ou des bordures.

Questions fréquentes

Quel est le tarif ?

Chaque requête API coûte $0.002. Le calcul peut également être exécuté dans le navigateur.

Comment la largeur des colonnes est-elle choisie ?

Chaque colonne utilise la plus grande largeur source parmi les images qui lui sont affectées.

Comment la hauteur des lignes est-elle choisie ?

Chaque ligne utilise la plus grande hauteur source parmi les images qui lui sont affectées.

Le calculateur redimensionne-t-il ou recadre-t-il les images ?

Non. Il calcule la géométrie et conserve les dimensions source. Le redimensionnement, le recadrage, le centrage et l’alignement relèvent du rendu.

Que se passe-t-il si le nombre d’images ne correspond pas ?

La requête échoue avec une erreur d’entrée non valide indiquant que le nombre doit être égal à rows multiplié par cols.

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

POSThttps://api.kit.forhosting.com/image/collage-layout

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/collage-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}'

const res = await fetch("https://api.kit.forhosting.com/image/collage-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "images": [
      {
        "width": 640,
        "height": 480
      },
      {
        "width": 800,
        "height": 600
      },
      {
        "width": 500,
        "height": 700
      },
      {
        "width": 720,
        "height": 540
      }
    ],
    "rows": 2,
    "cols": 2
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/collage-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "images": [
        {
            "width": 640,
            "height": 480
        },
        {
            "width": 800,
            "height": 600
        },
        {
            "width": 500,
            "height": 700
        },
        {
            "width": 720,
            "height": 540
        }
    ],
    "rows": 2,
    "cols": 2
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/collage-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/collage-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

{
  "images": [
    {
      "width": 640,
      "height": 480
    },
    {
      "width": 800,
      "height": 600
    },
    {
      "width": 500,
      "height": 700
    },
    {
      "width": 720,
      "height": 540
    }
  ],
  "rows": 2,
  "cols": 2
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.collage_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

par requête$0.002

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.

Consulter la documentation complète du KIT →