Recadrer une image

Le recadrage consiste à extraire une zone rectangulaire d'une image et à supprimer tout ce qui se trouve à l'extérieur. C'est l'une des opérations d'édition les plus anciennes, car elle modifie la composition sans rééchantillonner les pixels — une zone de 1000×800 extraite d'une photo de 4000×3000 conserve intacts tous les pixels d'origine de cette zone. Cette page recadre comme le ferait un éditeur de bureau : faites glisser la sélection sur l'aperçu, saisissez des valeurs précises dans les champs X/Y/W/H, verrouillez un format quand la sortie doit s'adapter à un gabarit fixe (avatar, bannière, photo d'identité), puis exportez en PNG/JPEG/WebP. La rotation et la symétrie sont appliquées après le recadrage, de sorte que le fichier enregistré possède déjà l'orientation souhaitée — un point important pour l'impression et pour les applications qui ignorent les balises EXIF d'orientation. Tout s'exécute dans votre navigateur via Canvas — les octets de l'image ne quittent jamais la page, vos documents et photos personnels restent donc sur votre appareil.

Le recadrage est logiquement simple — choisir un rectangle, copier ses pixels, jeter le reste — mais bien le faire dans le navigateur implique plusieurs rouages : l'aperçu à l'écran est une version réduite de l'original, les poignées de glissement travaillent en coordonnées d'affichage, et le recadrage effectif doit avoir lieu en coordonnées de l'image d'origine pour ne perdre aucune qualité. À l'ouverture d'un fichier, l'outil l'enveloppe avec URL.createObjectURL() pour obtenir une URL blob, puis le confie à un HTMLImageElement pour le décodage (zéro-copie, bien moins de mémoire qu'une data URL en base64). La largeur et la hauteur naturelles (img.naturalWidth / naturalHeight) deviennent l'espace de coordonnées canonique — chaque X/Y/W/H stocké dans l'état est exprimé dans ces pixels. L'aperçu <img> utilise max-width/max-height pour que le navigateur le mette à l'échelle ; à chaque chargement et redimensionnement, nous mesurons la largeur rendue via getBoundingClientRect() et stockons un ratio displayScale (rendu / naturel). Les deltas de la souris pendant un glissement sont divisés par ce ratio pour retraduire le mouvement d'affichage en pixels d'origine, ce qui maintient la précision du rectangle de recadrage quel que soit le facteur de réduction. Le cadre de recadrage lui-même est un <div> en position absolue superposé à l'image. Chacune de ses 8 poignées de redimensionnement (quatre coins + quatre bords) déclenche un pointerdown avec un mode ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' ou 'move') ; un écouteur pointermove au niveau window (les pointer events couvrent souris et tactile) lit la position en direct de la souris, calcule le delta depuis le début du glissement, le convertit en pixels d'origine et recalcule left/top/right/bottom du rectangle. Les glissements de coin redimensionnent en prenant le coin opposé comme ancre ; les glissements de bord conservent la ligne médiane perpendiculaire fixe ; les glissements à ratio verrouillé calculent d'abord l'axe dominant puis en dérivent l'autre. Chaque résultat est borné aux limites de l'image avec une taille minimale de 10 px, afin que le rectangle ne puisse ni s'inverser ni sortir du canvas. L'exportation utilise deux canvas hors écran. Le premier est dimensionné à la largeur × hauteur naturelles du recadrage ; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) utilise la forme à 9 arguments pour ne tirer que la zone recadrée — Chromium et Firefox effectuent ce transfert via le GPU comme une copie de texture, sans rééchantillonnage tant que la taille de destination ne diffère pas. Si une rotation ou un miroir est demandé, un second canvas est dimensionné aux limites après rotation (largeur/hauteur inversées pour 90°/270°), le contexte est translaté vers son centre, ctx.rotate(angle) et ctx.scale(±1, ±1) appliquent la transformation, et le canvas recadré est dessiné au décalage (-w/2, -h/2). Enfin, canvas.toBlob(mimeType, quality) renvoie les octets encodés sous forme de Blob ; URL.createObjectURL() le transforme en URL téléchargeable. La qualité est ignorée pour PNG (sans perte) et sert d'indication à l'encodeur pour JPEG et WebP (0–1). L'URL d'objet du blob est révoquée lorsqu'un nouveau recadrage la remplace, pour éviter de conserver en mémoire les données de pixels décodées.

• Les coordonnees de recadrage (X/Y/W/H) sont en pixels d'origine.
• Tout le traitement s'execute via l'API Canvas dans le navigateur.
• Le cadre de recadrage est un div positionne en absolu avec 8 poignees.
• L'exportation utilise des canvas hors ecran avec drawImage a 9 arguments.
• Les anciennes URL Blob sont explicitement revoquees a chaque transition.