Image Flip & Rotate

So verwendet man das Spiegeln- und Drehen-Werkzeug

1. Bild hochladen durch Ziehen in die Dropzone oder Klicken zum Durchsuchen. JPEG, PNG, WebP und GIF werden alle erfolgreich über createImageBitmap dekodiert.
2. Ausrichtungsschaltflächen betätigen. "Horizontal spiegeln" spiegelt links-rechts, "Vertikal spiegeln" spiegelt oben-unten, und die drei Drehen-Schaltflächen drehen das Bild um 90, 180 oder 270 Grad im Uhrzeigersinn.
3. Transformationen frei kombinieren. Jede Schaltfläche schaltet eine Zustandsanzeige in der Werkzeugleiste um, damit verfolgt werden kann, was angewendet wurde. Die Vorschau wird sofort neu gerendert - das Ergebnis ist sichtbar, bevor man festschreibt.
4. "Zurücksetzen" verwenden, um alle Transformationen rückgängig zu machen und zur ursprünglichen Ausrichtung zurückzukehren, ohne erneut hochladen zu müssen.
5. "Download" klicken, um die aktuelle ausgerichtete Version als PNG über canvas.toBlob zu exportieren. Die Pixeldaten werden exakt erhalten; keine Neuabtastung erfolgt.

Wie die Mathematik funktioniert

Spiegeln und Drehen um rechte Winkel sind reine Koordinatentransformationen - jeder Quellpixel wird auf genau einen Zielpixel abgebildet, sodass die Ausgabe exakt denselben Informationsgehalt wie die Eingabe hat. Wir verwenden den Matrix-Stack des Canvas-2D-Kontexts: ctx.translate, um den Ursprung dorthin zu verschieben, wo das gedrehte Bild landen muss, ctx.rotate mit einem Vielfachen von pi/2 Radiant für die Drehung, und ctx.scale(-1, 1) oder ctx.scale(1, -1) für horizontales oder vertikales Spiegeln. Alle vier Transformationen werden zu einer einzigen 3x3-affinen Matrix zusammengeführt, die drawImage beim Zeichnen anwendet.

Da die Matrix immer ein Vielfaches von 90 Grad plus ganzzahlige Pixeltranslationen ist, fallen die endgültigen abgetasteten Positionen exakt mit ganzzahligen Pixelzentren zusammen. Der Neuabtastfilter tut nichts: Jeder Ausgabepixel liest schließlich einen einzigen Quellpixel. Das bedeutet, dass Spiegeln oder Drehen, anders als beliebige Winkelrotation, bit-perfekt ist - man kann 90 Grad viermal drehen und mit exakt denselben Bytes enden, mit denen man begonnen hat.

Echte Grunde zum Spiegeln oder Drehen

• Korrigieren der Spiegel-Umkehrung, die Selfie-Kameras anwenden, damit Text im Hintergrund im endgültigen Foto korrekt lesbar ist.
• Beheben eines Telefon-Fotos, bei dem das EXIF-Orientierungs-Tag falsch war und die Aufnahme in älterer Software seitwärts aussieht.
• Drehen eines eingescannten Dokuments, das verkehrt herum in den Scanner eingelegt wurde, ohne es neu drucken zu müssen.
• Spiegeln eines Stock-Foto-Models, damit das Motiv in ein Layout hinein statt heraus schaut - ein klassischer Design-Trick für Hero-Images.
• Erstellen symmetrischer Design-Elemente durch Duplizieren eines Assets und horizontales Spiegeln einer Kopie.
• Vorbereiten eines "Vorher und Nachher"-Paars, bei dem das zweite Bild das erste für einen Nebeneinander-Vergleich spiegeln muss.

Fallstricke bei der Ausrichtung

• EXIF-Orientierungs-Tags werden entfernt. Telefone speichern die Pixeldaten oft im Querformat auf der Festplatte, setzen aber ein EXIF-"Orientation: Rotate 90 CW"-Tag, das Betrachter beim Anzeigen berücksichtigen. Erneutes Exportieren durch Canvas backt die Pixel in die endgültige Ausrichtung und entfernt das Tag, was für universelle Kompatibilität gewünscht ist.
• Gespiegelter Text wird unleserlich. Offensichtlich, aber eine Überraschung: Ein horizontal gespiegeltes Foto einer Straßenszene hat gespiegelte Schilder und Nummernschilder. Nicht spiegeln, wenn der Inhalt bedeutsamer Text ist.
• Nicht-90-Grad-Drehungen werden nicht angeboten. Die Schaltflächen sind auf Vielfache von 90 Grad beschränkt, weil beliebige Drehung Neuabtastung erfordert und Weichheit einführen würde. Einen vollständigen Editor verwenden, wenn ein schiefer Horizont um 2,7 Grad begradigt werden muss.
• Die Bildabmessungen tauschen bei 90- und 270-Grad-Drehungen. Ein 1920 x 1080-Querformat wird zu einem 1080 x 1920-Hochformat. Nachgelagerte Werkzeuge, die ein bestimmtes Seitenverhältnis erwarten, müssen das berücksichtigen.
• Animierte GIFs verlieren die Animation. Das Canvas sieht nur den aktuellen Frame. Die Animation in der Quelle behalten und ein GIF-spezifisches Werkzeug für die Transformation animierter Inhalte verwenden.

EXIF-Orientierung im Detail

Die EXIF-2.32-Spezifikation definiert Tag 0x0112 (Orientation) mit acht möglichen Werten, die die acht Kombinationen aus 90-Grad-Drehungen und Spiegelungen darstellen. Wert 1 ist "normal"; 3 ist "180 Grad drehen"; 6 ist "90 Grad im Uhrzeigersinn drehen"; 8 ist "90 Grad gegen den Uhrzeigersinn drehen"; und die Werte 2, 4, 5, 7 sind gespiegelte Varianten. Ein gut gestalteter Betrachter liest dieses Tag und wendet die Transformation beim Anzeigen an, wobei die eigentlichen Pixeldaten in ihrer ursprünglichen Sensorausrichtung bleiben. Deshalb kann ein Foto in der Fotos-App des Telefons korrekt aussehen, aber in einem älteren Werkzeug, das das Tag nicht berücksichtigt, seitwärts erscheinen. Erneutes Speichern durch Canvas ersetzt die zweideutige "Original-Pixel plus Tag"-Situation durch eindeutige "Pixel bereits in der richtigen Ausrichtung", was die Anzeige in jedem nachgelagerten Werkzeug behebt. Moderne Browser und die meisten modernen Editoren berücksichtigen EXIF-Orientierung automatisch; die Ausnahmen sind Kommandozeilen-Batch-Jobs und ältere CMS-Uploader.

Wann ein vollständiger Editor besser abschneidet

Für rechtwinklige Spiegelungen und Drehungen ist der Canvas-Ansatz wirklich das beste Werkzeug - verlustfrei, sofortig und privat. Wo Desktop-Editoren wie Photoshop, Affinity oder GIMP vorne liegen: beliebige Winkelrotation (Begradigen eines Horizonts), Perspektivkorrektur und nicht-destruktive Ausrichtungsbearbeitungen, die eine spätere Revision ermöglichen. Auf der CLI ist jhead -autorot der klassische Weg, EXIF-Orientierung für einen ganzen Ordner JPEGs verlustfrei in Pixel zu backen - es dreht verlustfrei mit JPEG-Block-Level-Operationen statt eines vollständigen Dekodier-Kodier-Zyklus. ImageMagicks magick input.jpg -auto-orient output.jpg leistet dasselbe mit höherer Qualität. Photopea, der browserbasierte Photoshop-Klon, bietet dieselben beliebigen Winkelrotationen mit einem richtigen Zuschneidewerkzeug zum Beheben der resultierenden leeren Ecken. Dieses Werkzeug für die übliche rechtwinklige Korrektur verwenden; zu einem echten Editor aufsteigen für beliebige Winkel oder Perspektivarbeit.