A few days ago, a user reached out with a frustrating bug report for my free browser-based Image Resizer.
"I uploaded a photo from my iPhone, resized it, but now my face is sideways."
If you've ever built an image processing tool, you know exactly what this is: the EXIF orientation bug.
Here is why it happens, and how I fixed it.
The "It Works on My Machine" Problem
When you upload a photo from a modern smartphone, the image file is often saved in landscape (e.g., 4032×3024). But if you held the phone vertically, the camera doesn't actually rotate the pixels. Instead, it writes a tiny piece of metadata called an EXIF Orientation tag (usually 6 or 8 ).
The phone's gallery app reads this tag and says, "Ah, I need to rotate this 90 degrees before showing it to the user."
But when you load that image into an HTML <canvas> using the classic method:
const img = new Image (); img . src = URL . createObjectURL ( file ); // ... later ... ctx .…