Kostenloses Bild-Drehungstool

90/180/270 gegenüber allem anderen, die verlustfreie Grenze

Es gibt zwei völlig verschiedene Arten der Bilddrehung. Drehungen um genau 90°, 180° oder 270° sind verlustfrei: Jedes Quellpixel landet auf genau einem ganzzahligen Zielpixel, die Bitmap wird permutiert statt neu berechnet, und es gibt keinerlei Interpolation, keine Überblendung, keinen Qualitätsverlust. Eine Drehung um 90° im Uhrzeigersinn bildet das Pixel (x, y) in einem W × H großen Bild auf die Position (H − 1 − y, x) in der neuen H × W großen Ausgabe ab. Eine Drehung um 180° bildet (x, y) auf (W − 1 − x, H − 1 − y) ab. Das sind reine Speicherumordnungs-Operationen.

Jeder andere Winkel erfordert Resampling: Für jedes Zielpixel berechnet der Algorithmus, woher es in der Quelle stammen würde (durch inverse Drehung), stellt fest, dass die Quellposition in der Regel gebrochen ist, und kombiniert die umliegenden Quellpixel mithilfe eines Interpolationskerns. Die gängigen Kerne:

• Nächster Nachbar: wählt das einzelne nächstgelegene Quellpixel. Schnell, erhält harte Kanten, erzeugt aber sichtbare „Treppchen“ entlang gedrehter Linien.
• Bilinear: gewichteter Durchschnitt der vier nächstgelegenen Quellpixel. Glatt, schnell, der Standard für die meisten Canvas-Implementierungen in Browsern.
• Bikubisch: gewichteter Durchschnitt der 16 nächstgelegenen Quellpixel mit einem glatten kubischen Kern. Schärfer als bilinear; der Standard in den bikubischen Optionen von Photoshop.
• Lanczos: gefensterte Sinc-Funktion über eine 6×6- oder 8×8-Nachbarschaft. Der hochwertigste gebräuchliche Kern; deutlich langsamer; kann an scharfen Kanten Ringing-Artefakte erzeugen.

Jeder Kern wägt Detailerhalt gegen Ringing oder Unschärfe ab, und alle teilen eine Wahrheit: jede Drehung, die nicht genau 90 beträgt, verwirft einen Teil der Quellinformation. Feine hochfrequente Details (ein Pixel breite Linien, subpixelgenau positionierte Textkanten, sauber aliasierte Pixel-Art) können eine Drehung um 30° oder 45° durch keinen Kern ohne eine gewisse Weichzeichnung überstehen. Nützliche Intuition: Drehen Sie um 1°, dann zurück um −1°, und Sie erhalten nicht das Original, sondern eine weichere Kopie. Drehen Sie um 90° und dann um −90°, und Sie erhalten exakt die ursprüngliche Bitmap zurück.

EXIF-Orientierung: der stille Grund, warum Ihr Foto seitlich lag

Das Problem „Der Browser zeigt mein Foto auf dem Kopf“ hat eine bestimmte Ursache. Moderne Smartphones drehen das Bild nicht physisch, wenn Sie ein Foto mit seitlich gehaltenem Telefon aufnehmen, sie speichern die ursprüngliche Sensorausrichtung und fügen ein EXIF-Orientierungs-Tag hinzu (um 1995 von JEIDA eingeführt), das den Betrachtern mitteilt, wie das Bild angezeigt werden soll. Das Tag hat 8 mögliche Werte: 1=normal, 3=180°, 6=90° im Uhrzeigersinn, 8=90° gegen den Uhrzeigersinn, plus vier gespiegelte Varianten.

Vor etwa 2010 schrieben Geräte gedrehte Pixel und Orientation = 1; von da an speichern moderne Telefone stattdessen die Originalpixel mit gesetzter Orientation, das spart Speicher und Akku. Der Haken: Browser berücksichtigten EXIF-Orientation historisch nicht außerhalb von <img>-Elementen. Ziehen Sie ein im Hochformat aufgenommenes Telefonfoto auf ein Canvas-basiertes Werkzeug, und die Canvas würde es seitlich zeichnen, sofern das Werkzeug das Orientation-Tag nicht ausdrücklich liest und anwendet. Die 2017 hinzugefügte CSS-Eigenschaft image-orientation behob dies für HTML; modernes createImageBitmap() mit imageOrientation: 'from-image' behebt es für Canvas. Chrome 81 (April 2020) machte image-orientation: from-image zum Standard für <img>-Elemente.

Wenn Sie jemals ein Foto in Ihrem Browser gedreht haben und es „bereits gedreht“ aussah oder zweimal gedreht wurde: Dann sind Sie darauf gestoßen. Die ehrliche Lösung besteht darin, dass das Drehwerkzeug das EXIF-Tag liest, diese Orientierung zuerst gedanklich anwendet und dann die vom Nutzer gewählte Drehung darüberlegt.

Wie die Canvas es macht

Die Methode rotate(angle) der Canvas dreht das Koordinatensystem um den Canvas-Ursprung (0, 0). Da der Ursprung die obere linke Ecke ist, dreht ein naiver Aufruf von ctx.rotate(angle) gefolgt von ctx.drawImage(img, 0, 0) das Bild um seine obere linke Ecke und schickt die meisten gedrehten Pixel nach oben links aus der Canvas hinaus. Das Standardrezept korrigiert dies mit einem Verschieben-Drehen-Verschieben-Sandwich:

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

Für eine 90/180/270-Drehung muss die Ziel-Canvas so dimensioniert werden, dass sie die vertauschten (90/270) oder die ursprünglichen (180) Abmessungen aufnimmt. Bei einem beliebigen Winkel ist das umschließende Rechteck des gedrehten Bildes größer als jede der beiden Quellabmessungen: Für ein W × H großes, um θ gedrehtes Bild ist der neue Begrenzungsrahmen |W·cos(θ)| + |H·sin(θ)| breit und |W·sin(θ)| + |H·cos(θ)| hoch. Ein 1000 × 800 großes, um 45° gedrehtes Bild benötigt daher eine etwa 1273 × 1273 große Canvas, um jedes gedrehte Pixel aufzunehmen. Der Schalter „Auf passende Größe zuschneiden“ entscheidet, ob die Canvas vergrößert wird (wobei jedes Pixel erhalten bleibt, mit transparenten oder weißen dreieckigen Ecken) oder auf die ursprünglichen Abmessungen zurückgeschnitten wird (wobei der gedrehte Inhalt beschnitten wird).

PNG- vs. JPG-Ausgabe, das Eckenproblem

Wenn eine Nicht-90-Drehung die Canvas vergrößert, müssen die vier dreieckigen Ecken mit irgendetwas gefüllt werden. PNG kann diese Lücken als vollständig transparente Pixel darstellen (Alpha = 0), perfekt, um das gedrehte Bild über einen anderen Hintergrund zu legen. JPG hat keinen Alphakanal und stellt alle nicht gefüllten Pixel in der Klarfarbe der Canvas dar, die JPEG zu opakem Schwarz verflacht. Wer ein JPG eines gedrehten Fotos herunterlädt und von schwarzen Keilen in den Ecken überrascht wird, ist genau auf dieses Problem gestoßen.

Dieses Werkzeug setzt die JPG-Ausgabe vor dem Kodieren auf einen weißen Hintergrund, um das Problem der schwarzen Ecken zu vermeiden. Die PNG-Ausgabe erhält die Transparenz. Die Wahl zwischen den Formaten: PNG für alles mit Transparenz oder wenn Sie weiter bearbeiten möchten, JPG für Fotos, die an ein endgültiges Ziel gehen, bei dem die Dateigröße zählt.

Es gibt noch eine Feinheit bei JPGs. Verlustfreie JPEG-Drehung ist technisch möglich: Das Dienstprogramm jpegtran ordnet die JPEG-Blockgrenzen (die 8×8-DCT-Koeffizientenblöcke) neu an, ohne das Bild neu zu dekodieren, sodass eine 90/180/270-Drehung die zugrunde liegenden komprimierten Daten unverändert lassen und ein JPEG ausgeben kann, das qualitativ bit-identisch zum Original ist. Der Haken ist eine iMCU-Kantenbedingung: Die Bildabmessungen müssen ein Vielfaches der Blockgröße sein, sonst schneidet die Drehung entweder einige Randpixel ab oder hinterlässt einen Teilblock. Diese Seite verwendet die Canvas-API statt einer Blockmanipulation im jpegtran-Stil, sodass die JPG-Ausgabe hier immer neu kodiert wird, mit maximaler Qualität, aber mit dem kleinen Generationsverlust, der jeder JPEG-Neukodierung innewohnt.

Wann Sie zu einem Browser-Rotationswerkzeug greifen

• Smartphone-Aufnahmen, die seitlich importiert wurden, in eine Desktop-Anwendung, die EXIF-Orientation nicht berücksichtigt.
• Gescannte Dokumente, die um 90° gedreht ankamen, weil die automatische Erkennung des Scanners falsch lag.
• Druckausrichtung: Vorbereiten eines Bildes für den Druck im Hoch- oder Querformat.
• Kunst- und Designkomposition: Drehen einer Fotografie, um verschiedene visuelle Ausrichtungen auszuprobieren.
• Schnelle Korrekturen vor dem Hochladen in soziale Medien, wenn die automatische Drehung der Plattform durcheinandergerät.
• Sensible Inhalte: Arbeitsdokumente, Ausweisfotos, Familienfotos, die Sie lieber nicht zu einem Drittanbieterdienst hochladen möchten.

Weitere Fragen

Verliert mein Foto an Qualität, wenn ich es nur um 90° drehe?

Nein, nicht im Drehschritt selbst: 90/180/270-Drehungen sind verlustfreie Permutationen. Das Qualitätsrisiko liegt beim Encoder. Wenn Sie ein JPEG hochladen, dekodiert dieses Werkzeug es, dreht das Pixel-Array und kodiert das Ergebnis dann neu. Die Neukodierung fügt einen kleinen Generationsverlust hinzu (bei maximaler Qualität typischerweise unsichtbar), weil JPEG verlustbehaftet ist. Um selbst das zu vermeiden, laden Sie als PNG herunter oder verwenden Sie ein spezielles Werkzeug wie jpegtran, das die DCT-Blöcke ohne erneutes Dekodieren neu anordnet.

Warum bleibt das Bild beim Drehen einer SVG gestochen scharf?

Da SVG vektorbasiert ist, speichert es Formen als mathematische Pfade statt als Pixelraster. Das Drehen einer SVG über transform="rotate(angle)" ändert nur die Pfadkoordinaten; es gibt keinen Resampling-Schritt und keinen Qualitätsverlust bei irgendeinem Winkel. Der Browser rastert die gedrehten Pfade bei jedem Neuzeichnen neu, immer auf der aktuellen Zoomstufe. Dieses Werkzeug arbeitet mit Rasterbildern (PNG, JPG, WebP) und stößt daher auf die Resampling-Kosten; SVGs dreht man am besten, indem man das transform-Attribut direkt bearbeitet oder einen Vektoreditor wie Inkscape oder Illustrator verwendet.

Warum sind die Ecken weiß statt transparent?

Sie laden die JPG-Ausgabe herunter. JPG hat keinen Alphakanal, daher werden die dreieckigen Lücken, die eine Nicht-90-Drehung hinterlässt, vor dem Kodieren mit Weiß gefüllt (oder mit Schwarz, bei Werkzeugen, die nicht gegen einen Hintergrund komponieren, die allzu häufige Überraschung mit dunklen Ecken). Wechseln Sie zum PNG-Download, und die Ecken werden korrekt transparent.

Kann ich in 1°-Schritten drehen?

Ja. Der Schieberegler oben bewegt sich in 1°-Schritten; das Eingabefeld akzeptiert jede Dezimalzahl (45,5° funktioniert problemlos). Für sehr präzise Ausrichtungsarbeiten (etwa das Geraderücken eines schiefen Horizonts in einem Foto) kann eine Genauigkeit unter einem Grad wichtig sein. Jede Nicht-90-Drehung kostet ein winziges bisschen Qualität, daher sollten Sie für wiederholtes Feintuning eine einzige Drehung um den endgültigen Zielwinkel in Betracht ziehen statt mehrerer schrittweiser Anpassungen.

Werden Daten an einen Server gesendet?

Nein. Das Bild wird von Ihrem Browser dekodiert, über die Canvas-2D-API auf eine Canvas gezeichnet und für den Download neu kodiert, alles in Ihrem Browser-Prozess. Die Datei verlässt niemals Ihr Gerät. Das Werkzeug funktioniert außerdem offline, sobald die Seite geladen ist.