Redimensionner un canevas avec marges, sans recadrage
Agrandissez le canevas d’une image avec des marges lorsque l’illustration doit conserver ses dimensions d’origine en pixels.
Lancer gratuitement
Tout se passe dans votre navigateur : gratuit, sans envoi de vos données.
Indiquez la largeur et la hauteur de l’image, les dimensions supérieures du canevas cible et la couleur d’arrière-plan. Le calculateur renvoie la marge exacte de chaque côté ainsi que la position du coin supérieur gauche de l’image. Il ne recadre, n’étire et ne rééchantillonne jamais la source. Si une dimension cible est trop petite, la requête échoue au lieu de modifier discrètement le visuel.
Agrandissez le canevas tout en préservant chaque pixel source
Agrandir un canevas et redimensionner une image répondent à deux besoins différents. La mise à l’échelle modifie le nombre de pixels occupés par le visuel ; elle peut adoucir les détails, changer des dimensions soigneusement préparées ou enfreindre une contrainte de production. Ce calculateur conserve intégralement la largeur et la hauteur de l’image. Il soustrait ces dimensions à celles du canevas demandé, puis décrit l’espace vide à ajouter autour de la source. Il convient donc à une photo de produit, une illustration, une capture d’écran ou une ressource générée déjà au bon format, mais qui nécessite un cadre plus grand. Saisissez des dimensions entières positives en pixels et la couleur de fond prévue. Le résultat rappelle les dimensions, fournit les marges haute, droite, basse et gauche, ainsi que les coordonnées x et y du début de l’image. Aucun fichier n’est transféré ni décodé, car seule la géométrie intervient.
Comprenez le centrage lorsque l’espace restant est impair
Le centrage est exact lorsque la différence entre le canevas et l’image est paire. Par exemple, 400 pixels horizontaux supplémentaires donnent 200 pixels à gauche et 200 à droite. Une différence impaire ne se partage pas en deux moitiés exprimées en pixels entiers. Le calculateur attribue alors la plus petite part à gauche ou en haut, et le pixel supplémentaire à droite ou en bas. Une différence horizontale de 401 devient ainsi 200 pixels à gauche et 201 à droite. Cette convention garantit une position déterministe et évite les coordonnées fractionnaires impossibles à représenter dans les outils matriciels. La valeur image_position correspond aux marges gauche et haute ; vous pouvez donc la transmettre directement à de nombreuses API de dessin, de composition ou de ligne de commande. L’addition des marges et de l’image reconstitue toujours exactement les dimensions du canevas, ce qui simplifie les contrôles automatiques.
Validez la cible avant de construire votre traitement d’image
Le canevas cible doit être au moins aussi large et aussi haut que l’image source. Une seule condition ne suffit pas : un canevas large mais trop bas recadrerait verticalement, tandis qu’un canevas haut mais trop étroit recadrerait horizontalement. Le calculateur rejette ces deux situations avec une erreur de saisie, afin de signaler tout recadrage accidentel dès la préparation. Des dimensions égales sont valides et produisent des marges nulles sur les quatre côtés ; cela convient aux traitements recevant des ressources variées dont certaines correspondent déjà à la cible. La couleur de fond est volontairement considérée comme une chaîne non vide, sans imposer une syntaxe particulière. Vous pouvez conserver une valeur hexadécimale, un format CSS, un nom ou un jeton comme transparent, si l’outil suivant le comprend. Utilisez la réponse pour paramétrer l’extension du canevas. L’API coûte $0.002 par requête et reste parfaitement déterministe.
Cas d’usage
Uniformiser les canevas de photos produit
Centrez une photo de produit déjà dimensionnée sur un canevas de catalogue uniforme, sans l’agrandir ni la recadrer.
Préparer des visuels sociaux sans risque
Calculez la bordure nécessaire autour d’un visuel terminé avant son export vers le canevas plus grand d’une plateforme.
Configurer un traitement d’image
Transformez les dimensions source et cible en décalages exacts pour une future opération d’extension du canevas.
Questions fréquentes
Cet outil redimensionne-t-il ou rééchantillonne-t-il l’image ?
Non. Il préserve les dimensions indiquées et calcule uniquement la surface supplémentaire du canevas autour de l’image.
Que se passe-t-il si le canevas cible est plus petit ?
La requête renvoie une erreur de saisie si une dimension cible est inférieure à la dimension correspondante de l’image.
Où va le pixel supplémentaire lorsque la marge est impaire ?
Le pixel supplémentaire est placé à droite ou en bas ; la gauche et le haut reçoivent la moitié entière la plus petite.
Quels formats de couleur d’arrière-plan sont acceptés ?
Le calculateur accepte toute chaîne de couleur non vide et la renvoie sans espaces extérieurs. L’outil en aval décide si sa syntaxe est valide.
Combien coûte une requête API ?
Chaque requête API coûte $0.002. Le calcul utilise uniquement les dimensions et le texte de la couleur, jamais le fichier image.
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/canvas-resize-pad \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/image/canvas-resize-pad", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/canvas-resize-pad",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/canvas-resize-pad", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/canvas-resize-pad", 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
{
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.canvas_resize_pad",
"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. |