Rotateur d'image, gratuit

90/180/270 contre tout le reste, la frontière du sans-perte

Il existe deux types de rotation d'image complètement différents. Les rotations d'exactement 90°, 180° ou 270° sont sans perte : chaque pixel source atterrit sur exactement un pixel de destination entier, le bitmap est permuté plutôt que recalculé, et il n'y a aucune interpolation, aucun mélange, aucune perte de qualité quelle qu'elle soit. Une rotation de 90° dans le sens horaire fait correspondre le pixel (x, y) d'une image W × H à la position (H − 1 − y, x) dans la nouvelle sortie H × W. Une rotation de 180° fait correspondre (x, y) à (W − 1 − x, H − 1 − y). Ce sont de pures opérations de réorganisation de mémoire.

Tout autre angle nécessite un rééchantillonnage : pour chaque pixel de destination, l'algorithme calcule d'où il serait venu dans la source (par rotation inverse), constate que l'emplacement source est généralement fractionnaire, et combine les pixels source environnants à l'aide d'un noyau d'interpolation. Les noyaux courants :

• Plus proche voisin : choisit l'unique pixel source le plus proche. Rapide, préserve les bords nets, mais produit des « crénelures » visibles le long des lignes tournées.
• Bilinéaire : moyenne pondérée des quatre pixels source les plus proches. Lisse, rapide, c'est le réglage par défaut de la plupart des implémentations de canevas des navigateurs.
• Bicubique : moyenne pondérée des 16 pixels source les plus proches à l'aide d'un noyau cubique lisse. Plus net que le bilinéaire ; c'est le réglage par défaut des options bicubiques de Photoshop.
• Lanczos : fonction sinc fenêtrée sur un voisinage de 6×6 ou 8×8. Le noyau de la plus haute qualité d'usage courant ; nettement plus lent ; peut produire des artefacts de rebond sur les bords nets.

Chaque noyau fait un compromis entre la préservation des détails et le rebond ou le flou, et tous partagent une vérité : toute rotation autre que de 90 perd une partie de l'information source. Les détails fins à haute fréquence (lignes d'un pixel, bords de texte positionnés au sous-pixel, pixel art proprement crénelé) ne peuvent pas survivre à une rotation de 30° ou 45° avec un noyau quelconque sans un certain adoucissement. Intuition utile : tournez de 1°, puis revenez de −1°, et vous n'obtenez pas l'original : vous obtenez une copie plus douce. Tournez de 90° puis de −90° et vous récupérez le bitmap original exact.

L'orientation EXIF : la raison silencieuse pour laquelle votre photo était de travers

Le problème du « navigateur qui affiche ma photo à l'envers » a une cause précise. Les smartphones modernes ne font pas physiquement pivoter l'image lorsque vous prenez une photo en tenant le téléphone de côté : ils stockent l'orientation d'origine du capteur et ajoutent une balise EXIF Orientation (introduite par JEIDA vers 1995) qui indique aux logiciels d'affichage comment l'image doit être affichée. La balise a 8 valeurs possibles : 1=normal, 3=180°, 6=90° dans le sens horaire, 8=90° dans le sens antihoraire, plus quatre variantes en miroir.

Avant 2010 environ, les appareils écrivaient des pixels déjà tournés avec Orientation = 1 ; à partir de là, les téléphones modernes stockent les pixels d'origine avec une Orientation définie à la place, ce qui économise du stockage et de la batterie. Le hic : les navigateurs n'ont historiquement pas respecté l'orientation EXIF en dehors des éléments <img>. Glissez une photo de téléphone en portrait sur un outil basé sur le canevas, et le canevas la dessinerait de côté à moins que l'outil ne lise et n'applique explicitement la balise Orientation. La propriété CSS image-orientation ajoutée en 2017 a corrigé cela pour le HTML ; le createImageBitmap() moderne avec imageOrientation: 'from-image' le corrige pour le canevas. Chrome 81 (avril 2020) a fait de image-orientation: from-image la valeur par défaut pour les éléments <img>.

Si vous avez déjà fait pivoter une photo dans votre navigateur et qu'elle est apparue « déjà tournée », ou tournée deux fois : vous avez rencontré ce problème. La solution honnête consiste, pour l'outil de rotation, à lire la balise EXIF, à appliquer mentalement cette orientation d'abord, puis à ajouter par-dessus la rotation choisie par l'utilisateur.

Comment le canevas s'y prend

La méthode rotate(angle) du canevas fait pivoter le système de coordonnées autour de l'origine du canevas (0, 0). Comme l'origine est le coin supérieur gauche, appeler naïvement ctx.rotate(angle) suivi de ctx.drawImage(img, 0, 0) fait pivoter l'image autour de son coin supérieur gauche, envoyant la plupart des pixels tournés hors du canevas vers le coin supérieur gauche. La recette standard corrige cela avec un sandwich translation-rotation-translation :

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

Pour une rotation de 90/180/270, le canevas de destination doit être dimensionné pour s'adapter aux dimensions échangées (90/270) ou d'origine (180). Pour un angle arbitraire, le rectangle englobant de l'image tournée est plus grand que l'une ou l'autre dimension source : pour une image W × H tournée d'un angle θ, la nouvelle boîte englobante mesure |W·cos(θ)| + |H·sin(θ)| de large et |W·sin(θ)| + |H·cos(θ)| de haut. Une image 1000 × 800 tournée de 45° nécessite donc un canevas d'environ 1273 × 1273 pour contenir chaque pixel tourné. L'option « Rogner à la forme » décide d'agrandir le canevas (en préservant chaque pixel, avec des coins triangulaires transparents ou blancs) ou de revenir aux dimensions d'origine (en rognant le contenu tourné).

Sortie PNG ou JPG, le problème des coins

Lorsqu'une rotation autre que de 90 agrandit le canevas, les quatre coins triangulaires doivent être remplis avec quelque chose. Le PNG peut rendre ces vides en pixels entièrement transparents (alpha = 0), parfait pour superposer l'image tournée sur un autre arrière-plan. Le JPG n'a pas de canal alpha et rend tout pixel non rempli avec la couleur d'effacement du canevas, que le JPEG aplatit en noir opaque. Un utilisateur qui télécharge un JPG d'une photo tournée et est surpris par des triangles noirs dans les coins a rencontré exactement ce problème.

Cet outil compose la sortie JPG sur un arrière-plan blanc avant l'encodage pour éviter le problème des coins noirs. La sortie PNG préserve la transparence. Le choix entre les formats : le PNG pour tout ce qui comporte de la transparence ou que vous retoucherez encore, le JPG pour les photos destinées à une destination finale où la taille du fichier compte.

Il y a une nuance supplémentaire pour les JPG. La rotation JPEG sans perte est techniquement possible : l'utilitaire jpegtran réorganise les limites des blocs JPEG (les blocs de coefficients DCT 8×8) sans redécoder l'image, de sorte qu'une rotation de 90/180/270 peut laisser intactes les données compressées sous-jacentes et produire un JPEG dont la qualité est bit à bit identique à l'original. Le hic est une contrainte de bord iMCU : les dimensions de l'image doivent être un multiple de la taille du bloc, sinon la rotation rogne quelques pixels de bord ou laisse un bloc partiel. Cette page utilise l'API canvas plutôt qu'une manipulation de blocs de type jpegtran, de sorte que la sortie JPG est ici toujours réencodée, à la qualité maximale, mais avec la petite perte de génération inhérente à tout réencodage JPEG.

Quand recourir à un rotateur dans le navigateur

• Photos de smartphone importées de travers dans une application de bureau qui ne respecte pas l'orientation EXIF.
• Documents numérisés arrivés tournés de 90° parce que la détection automatique du scanner s'est trompée.
• Orientation d'impression : préparer une image pour une impression en portrait ou en paysage.
• Composition artistique et graphique : faire pivoter une photographie pour tester différentes orientations visuelles.
• Corrections rapides avant des publications sur les réseaux sociaux lorsque la rotation automatique de la plateforme s'emmêle.
• Contenu sensible : documents de travail, photos d'identité, photos de famille, que vous préféreriez ne pas téléverser vers un service tiers.

Autres questions

Ma photo perdra-t-elle en qualité si je la fais simplement pivoter de 90° ?

Non, pas lors de l'étape de rotation elle-même : les rotations de 90/180/270 sont des permutations sans perte. Le risque de qualité, c'est l'encodeur. Si vous importez un JPEG, cet outil le décode, fait pivoter le tableau de pixels, puis réencode le résultat. Le réencodage ajoute une petite perte de génération (généralement invisible à la qualité maximale) parce que le JPEG est avec perte. Pour éviter même cela, téléchargez en PNG, ou utilisez un outil dédié comme jpegtran qui réorganise les blocs DCT sans redécoder.

Pourquoi la rotation d'un SVG conserve-t-elle l'image nette ?

Parce que le SVG est vectoriel : il stocke les formes sous forme de chemins mathématiques plutôt que de grille de pixels. Faire pivoter un SVG via transform="rotate(angle)" ne fait que modifier les coordonnées des chemins ; il n'y a pas d'étape de rééchantillonnage ni de perte de qualité, quel que soit l'angle. Le navigateur rematricialise les chemins tournés à chaque redessin, toujours au niveau de zoom actuel. Cet outil opère sur des images matricielles (PNG, JPG, WebP) et rencontre donc le coût du rééchantillonnage ; les SVG se font mieux pivoter en modifiant directement l'attribut transform ou en utilisant un éditeur vectoriel comme Inkscape ou Illustrator.

Pourquoi les coins sont-ils blancs au lieu d'être transparents ?

Vous téléchargez la sortie JPG. Le JPG n'a pas de canal alpha, de sorte que les vides triangulaires laissés par une rotation autre que de 90 sont remplis de blanc avant l'encodage (ou de noir, sur les outils qui ne composent pas sur un arrière-plan, la trop fréquente mauvaise surprise des coins sombres). Passez au téléchargement PNG et les coins seront correctement transparents.

Puis-je faire pivoter par incréments de 1° ?

Oui. Le curseur ci-dessus se déplace par pas de 1° ; le champ de saisie accepte n'importe quelle décimale (45,5° fonctionne très bien). Pour un travail d'alignement très précis (redresser un horizon penché sur une photo, par exemple), une précision inférieure au degré peut compter. Chaque rotation autre que de 90 coûte une infime quantité de qualité, donc pour des réglages fins répétés, envisagez de faire une seule rotation selon l'angle cible final plutôt que plusieurs ajustements incrémentaux.

Des données sont-elles envoyées à un serveur ?

Non. L'image est décodée par votre navigateur, dessinée sur un canevas via l'API Canvas 2D, et réencodée pour le téléchargement, le tout dans le processus de votre navigateur. Le fichier ne quitte jamais votre appareil. L'outil fonctionne aussi hors ligne une fois la page chargée.