Menu

How I Fixed the EXIF Orientation Bug in My Browser-Based Image Resizer
📰

How I Fixed the EXIF Orientation Bug in My Browser-Based Image Resizer

DEV Community: javascript·khuram shahzad·about 5 hours ago
#xAyCg7zN
#devtojavascript#devto#dev#canvas#exif
Reading 0:00
15s threshold

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 .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.