Recadreur d'image — outil gratuit

Comment ça marche

Le recadrage se fait entièrement dans votre navigateur avec l'API Canvas HTML5 — sans envoi de fichier, sans serveur. Vous faites glisser une région de sélection directement sur un élément canevas, et quand vous appliquez le recadrage, le moteur de rendu 2D intégré du navigateur ne lit que les pixels sélectionnés et les réencode en JPEG, PNG ou WebP.

1. 1
   L'image est chargée en mémoire

   Votre fichier est lu avec URL.createObjectURL(), qui remet au navigateur une URL de blob locale. Un HTMLImageElement décode le fichier entièrement dans l'onglet du navigateur — les octets de l'image ne quittent jamais votre appareil.
2. 2
   L'API Pointer Events pilote la sélection de recadrage

   L'API Pointer Events du navigateur (qui unifie les entrées souris, tactile et stylet) suit les glissements sur une superposition canevas. Appuyer en dehors de la sélection démarre un nouveau rectangle ; appuyer à l'intérieur le déplace ; appuyer près du coin inférieur droit le redimensionne. Des préréglages de ratio d'aspect optionnels (1:1, 16:9, 4:3, etc.) contraignent la géométrie pendant le glissement.
3. 3
   Canvas dessine l'aperçu en direct

   À chaque changement de recadrage, le contexte Canvas 2D redessine l'image, applique une superposition sombre en dehors de la sélection, efface la région de recadrage pour montrer l'image originale en pleine fidélité, et superpose une grille des tiers et une poignée de redimensionnement sarcelle.
4. 4
   toBlob() encode et livre le résultat

   Quand vous cliquez sur Recadrer, un nouveau canevas hors écran est créé aux dimensions exactes du recadrage. ctx.drawImage() ne copie que le rectangle sélectionné, et canvas.toBlob() encode le résultat avec l'encodeur JPEG, PNG ou WebP natif du navigateur au réglage de qualité choisi. Le résultat est remis sous forme d'URL de blob locale pour le téléchargement.

Outils associés