Recadrer une image

Recadrez selon le cadre exact dont vous avez besoin

Recadrer une image coupe une zone rectangulaire sélectionnée à partir d'une image PNG, JPEG ou WebP sans la télécharger. Utilisez-le pour supprimer les bords, centrer un sujet ou faire correspondre les ratios fixes de carte, de vignette, d'avatar et de prévisualisation sociale.

La zone de recadrage utilise des coordonnées en pixels : X et Y marquent le coin supérieur gauche, tandis que la largeur et la hauteur définissent la zone sélectionnée. Le recadrage modifie la composition et les dimensions de sortie ; les pixels sélectionnés sont exportés à la taille de recadrage choisie.

Le traitement s'exécute via la toile du navigateur. Le recadrage gratuit est idéal pour un cadrage arbitraire, tandis que les préréglages 1:1, 4:3 et 16:9 sont utiles lorsque la destination nécessite un rapport hauteur/largeur stable. Examinez le résultat, car la gestion des métadonnées et de l’orientation peut différer après le réencodage.

Comment utiliser

1. Téléchargez une image PNG, JPEG ou WebP.
2. Faites glisser la zone de recadrage, redimensionnez-la à partir des poignées, choisissez un rapport prédéfini ou saisissez des valeurs de recadrage exactes.
3. Ajustez la qualité JPEG/WebP, prévisualisez la sortie, puis téléchargez l'image recadrée.

Quand faut-il recadrer une image ?

Recadrer une image permet de modifier le cadre d'une image : supprimez les marges vides, faites la mise au point sur le sujet important ou placez une image dans un emplacement à rapport fixe.

Utilisez des valeurs exactes de X, Y, de largeur et de hauteur lorsqu'une spécification de conception ou un CMS demande un recadrage précis des pixels. Les exportations JPEG/WebP peuvent être ajustées en termes de qualité, tandis que PNG constitue le choix le plus sûr lorsque la transparence doit rester intacte.

Recadrer avec Canvas

Le recadrage du canevas utilise les coordonnées source et dessine uniquement le rectangle sélectionné dans le canevas de sortie :

const canvas = document.createElement('canvas');
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
canvas.toBlob(saveBlob, outputMime, quality);

Intégration MCP

MCP (Model Context Protocol) permet aux agents IA et aux applications de découvrir et d'exécuter les utilitaires Coding.Tools pour des flux de travail répétables de conversion, formatage, hachage et génération.

Nom de l'outil MCP: image-crop

Point de terminaison MCP: https://coding.tools/mcp

Appelez d'abord tools/list. Chaque outil inclut inputSchema, outputSchema et examples afin qu'un agent IA ou un client puisse construire des arguments valides sans deviner.

Pour tools/call, lisez result.content[0].text pour la valeur affichable et result.structuredContent pour l'analyse par programme. Les échecs d'outil renvoient isError: true ; les échecs de protocole renvoient une erreur JSON-RPC.

Exemple de requête tools/call :

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-crop","arguments":{}}}'

Cet outil d'image est réservé au navigateur dans MCP. tools/call ne traite pas les octets d'image locaux côté serveur ; il renvoie isError: true avec un resource_link vers l'interface Web.

La plupart des outils de texte et de données acceptent une chaîne input et des options facultatives. Les outils d'image qui dépendent des API d'image du navigateur sont listés pour la découverte et renvoient un lien vers l'interface Web si nécessaire.