Rotatore di immagini gratuito

90/180/270 contro tutti gli altri angoli, la linea senza perdite

Esistono due tipi completamente diversi di rotazione delle immagini. Le rotazioni esattamente di 90°, 180° o 270° sono senza perdite: ogni pixel sorgente finisce esattamente su un pixel destinazione intero, la bitmap viene permutata piuttosto che ricalcolata, e non vi è alcuna interpolazione, alcun blending, nessuna perdita di qualità. Una rotazione di 90° in senso orario mappa il pixel (x, y) in un'immagine W × H nella posizione (H − 1 − y, x) nel nuovo output H × W. Una rotazione di 180° mappa (x, y) in (W − 1 − x, H − 1 − y). Sono pure operazioni di rimescolamento della memoria.

Qualsiasi altro angolo richiede il ricampionamento: per ogni pixel di destinazione, l'algoritmo calcola da dove sarebbe provenuto nella sorgente (per rotazione inversa), trova che la posizione sorgente è generalmente frazionaria e combina i pixel sorgente circostanti utilizzando un kernel di interpolazione. I kernel comuni:

• Nearest neighbour: seleziona il singolo pixel sorgente più vicino. Veloce, preserva i bordi netti, ma produce «jaggies» visibili lungo le linee ruotate.
• Bilineare: media ponderata dei quattro pixel sorgente più vicini. Fluido, veloce, il predefinito per la maggior parte delle implementazioni canvas del browser.
• Bicubico: media ponderata dei 16 pixel sorgente più vicini utilizzando un kernel cubico fluido. Più nitido del bilineare; il predefinito nelle opzioni bicubiche di Photoshop.
• Lanczos: funzione sinc con finestra su un intorno di 6×6 o 8×8. Il kernel di qualità più elevata in uso comune; significativamente più lento; può produrre artefatti di ringing sui bordi netti.

Ogni kernel bilancia la preservazione dei dettagli contro il ringing o la sfocatura, e tutti condividono una verità: qualsiasi rotazione non di 90 scarta alcune informazioni sorgente. I dettagli ad alta frequenza (linee da un pixel, bordi di testo posizionati a subpixel, pixel art con aliasing pulito) non possono sopravvivere a una rotazione di 30° o 45° attraverso alcun kernel senza un certo ammorbidimento. Intuizione utile: ruotare di 1°, poi di −1°, e non si ottiene l'originale, si ottiene una copia più morbida. Ruotare di 90° poi di −90° e si ottiene di nuovo la bitmap originale esatta.

EXIF Orientation: il motivo silenzioso per cui la tua foto era di lato

Il problema «il browser mostra la mia foto capovolta» ha una causa specifica. Gli smartphone moderni non ruotano fisicamente l'immagine quando si scatta una foto tenendo il telefono di lato; memorizzano l'orientamento originale del sensore e aggiungono un tag EXIF Orientation (introdotto da JEIDA intorno al 1995) che indica ai visualizzatori come deve essere mostrata l'immagine. Il tag ha 8 valori possibili: 1=normale, 3=180°, 6=90° in senso orario, 8=90° in senso antiorario, più quattro varianti speculari.

Prima del 2010 circa, i dispositivi scrivevano i pixel ruotati e Orientation = 1; da allora, i telefoni moderni memorizzano i pixel originali con Orientation impostato, risparmiando storage e batteria. Il problema: i browser storicamente non rispettavano EXIF Orientation al di fuori degli elementi <img>. Trascinare la foto verticale di un telefono su uno strumento basato su canvas fa sì che il canvas la disegni di lato, a meno che lo strumento non legga e applichi esplicitamente il tag Orientation. La proprietà CSS image-orientation aggiunta nel 2017 ha risolto il problema per HTML; il moderno createImageBitmap() con imageOrientation: 'from-image' lo risolve per canvas. Chrome 81 (aprile 2020) ha reso image-orientation: from-image il valore predefinito per gli elementi <img>.

Se si è mai ruotata una foto nel browser e appariva «già ruotata», o ruotata due volte: si è incappati in questo problema. La correzione onesta è che lo strumento di rotazione legga il tag EXIF, applichi mentalmente prima quell'orientamento, poi aggiunga la rotazione scelta dall'utente.

Come lo fa il canvas

Il metodo rotate(angle) del canvas ruota il sistema di coordinate attorno all'origine del canvas (0, 0). Poiché l'origine è l'angolo in alto a sinistra, chiamare ingenuamente ctx.rotate(angle) seguito da ctx.drawImage(img, 0, 0) ruota l'immagine attorno al suo angolo in alto a sinistra, inviando la maggior parte dei pixel ruotati fuori dal canvas verso l'alto a sinistra. La ricetta standard corregge questo con un sandwich translate-rotate-translate:

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();

Per una rotazione di 90/180/270, il canvas di destinazione deve essere dimensionato per contenere le dimensioni scambiate (90/270) o originali (180). Per un angolo arbitrario, il rettangolo di delimitazione dell'immagine ruotata è più grande di entrambe le dimensioni sorgente; per un'immagine W × H ruotata di θ, il nuovo bounding box è largo |W·cos(θ)| + |H·sin(θ)| e alto |W·sin(θ)| + |H·cos(θ)|. Un'immagine 1000 × 800 ruotata di 45° necessita quindi di un canvas di circa 1273 × 1273 per contenere ogni pixel ruotato. L'interruttore «Ritaglia per adattare» decide se espandere il canvas (preservando ogni pixel, con angoli triangolari trasparenti o bianchi) o ridurre alle dimensioni originali (ritagliando il contenuto ruotato).

Output PNG vs JPG, il problema degli angoli

Quando una rotazione non di 90 espande il canvas, i quattro angoli triangolari devono essere riempiti con qualcosa. PNG può rendere questi spazi vuoti come pixel completamente trasparenti (alpha = 0), perfetto per sovrapporre l'immagine ruotata su un altro sfondo. JPG non ha canale alpha e renderizza i pixel non riempiti come il colore di cancellazione del canvas, che JPEG appiattisce in nero opaco. Un utente che scarica un JPG di una foto ruotata e si sorprende di trovare cunei neri agli angoli ha incontrato esattamente questo problema.

Questo strumento compone l'output JPG su uno sfondo bianco prima della codifica per evitare il problema degli angoli neri. L'output PNG preserva la trasparenza. La scelta tra i formati: PNG per qualsiasi cosa con trasparenza o dove si eseguirà un'ulteriore modifica, JPG per le foto dirette a una destinazione finale dove le dimensioni del file contano.

C'è un'ulteriore sfumatura per i JPG. La rotazione JPEG senza perdite è tecnicamente possibile: l'utilità jpegtran ridispone i blocchi JPEG (gli 8×8 blocchi di coefficienti DCT) senza decodificare nuovamente l'immagine, quindi una rotazione di 90/180/270 può lasciare intatti i dati compressi sottostanti ed emettere un JPEG di qualità bit-identica all'originale. Il problema è un vincolo di bordo iMCU: le dimensioni dell'immagine devono essere un multiplo della dimensione del blocco, altrimenti la rotazione o taglia alcuni pixel ai bordi o lascia un blocco parziale. Questa pagina usa l'API canvas invece della manipolazione dei blocchi in stile jpegtran, quindi l'output JPG qui è sempre ricodificato, alla qualità massima, ma con la piccola perdita generazionale inerente a qualsiasi ricodifica JPEG.

Quando si userebbe un rotatore browser

• Foto da smartphone importate di lato in un'applicazione desktop che non rispetta EXIF Orientation.
• Documenti scansionati arrivati ruotati di 90° perché il rilevamento automatico dello scanner era errato.
• Orientamento di stampa: preparare un'immagine per la stampa verticale o orizzontale.
• Composizione artistica e grafica: ruotare una fotografia per testare diversi orientamenti visivi.
• Correzioni rapide prima dell'upload sui social media quando la rotazione automatica della piattaforma si comporta in modo errato.
• Contenuto sensibile: documenti di lavoro, foto di documenti d'identità, foto di famiglia, che si preferisce non caricare su un servizio di terze parti.

Altre domande

La mia foto perderà qualità se la ruoto semplicemente di 90°?

No, non nella fase di rotazione stessa; le rotazioni di 90/180/270 sono permutazioni senza perdite. Il rischio per la qualità è il codificatore. Se si carica un JPEG, questo strumento lo decodifica, ruota l'array di pixel, poi ricodifica il risultato. La ricodifica aggiunge una piccola perdita generazionale (tipicamente invisibile alla qualità massima) perché JPEG è lossy. Per evitare anche quella, scaricare come PNG, oppure usare uno strumento dedicato come jpegtran che ridispone i blocchi DCT senza decodificare.

Perché ruotare un SVG mantiene l'immagine nitida?

Poiché SVG è vettoriale, memorizza le forme come percorsi matematici piuttosto che come una griglia di pixel. Ruotare un SVG tramite transform="rotate(angle)" modifica semplicemente le coordinate del percorso; non c'è una fase di ricampionamento e nessuna perdita di qualità a qualsiasi angolo. Il browser rasterizza nuovamente i percorsi ruotati ogni volta che ridisegna, sempre al livello di zoom corrente. Questo strumento opera su immagini raster (PNG, JPG, WebP) e quindi incontra il costo del ricampionamento; gli SVG si ruotano meglio modificando direttamente l'attributo transform o usando un editor vettoriale come Inkscape o Illustrator.

Perché gli angoli sono bianchi invece di trasparenti?

Si sta scaricando l'output JPG. JPG non ha canale alpha, quindi gli spazi triangolari lasciati da una rotazione non di 90 vengono riempiti con bianco prima della codifica (o con nero, negli strumenti che non compongono su uno sfondo, la fin troppo comune sorpresa degli angoli scuri). Passare al download PNG e gli angoli saranno correttamente trasparenti.

Posso ruotare con incrementi di 1°?

Sì. Il cursore sopra si sposta in passi di 1°; il campo di input accetta qualsiasi decimale (45,5° va bene). Per un lavoro di allineamento molto preciso (ad esempio raddrizzare un orizzonte inclinato in una foto) la precisione inferiore al grado può essere importante. Ogni rotazione non di 90 costa una piccola quantità di qualità, quindi per una messa a punto ripetuta considerare di eseguire una singola rotazione dell'angolo obiettivo finale piuttosto che diversi aggiustamenti incrementali.

Vengono inviati dati a un server?

No. L'immagine viene decodificata dal browser, disegnata su un canvas tramite l'API Canvas 2D e ricodificata per il download, tutto nel processo del browser. Il file non lascia mai il dispositivo. Lo strumento funziona anche offline una volta che la pagina è caricata.