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

khuram shahzad — Thu, 29 Oct 2026 17:34:38 +0000

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.drawImage(img, 0, 0, newWidth, newHeight);

The canvas ignores the EXIF data. It just reads the raw pixels (landscape) and draws them. That's why the resized image looks sideways.

The Old Way (and why it's a headache)

For years, developers had to parse the image file's binary data manually using libraries like exif-js, read the orientation tag, and then write complex math inside the canvas context to manually rotate, flip, or mirror the image.

It worked, but it was a lot of code and prone to breaking.

The Modern Fix: createImageBitmap()

Modern browsers have a much better API for this: createImageBitmap().

Instead of just loading an <img> tag, you can pass the raw File object directly to this function and pass a configuration object with it. The magic property is imageOrientation: "from-image".

Here is how the logic looks in my tool now:

async function handleFile(file) {
    try {
        // The browser reads the file AND respects the EXIF data
        const bitmap = await createImageBitmap(file, {
            imageOrientation: "from-image" 
        });

        // Now the width and height are correct, and the pixels are rotated
        const originalWidth = bitmap.width;
        const originalHeight = bitmap.height;

        // Pass the bitmap to the canvas...
        const canvas = document.createElement("canvas");
        canvas.width = originalWidth;
        canvas.height = originalHeight;

        const ctx = canvas.getContext("2d");
        ctx.drawImage(bitmap, 0, 0);

        // ... rest of the resizing logic

    } catch (err) {
        console.error("Could not read image", err);
    }
}

By adding imageOrientation: "from-image", the browser handles the EXIF rotation for you. It literally takes an iPhone photo taken in portrait mode and hands you a perfectly upright ImageBitmap ready for the canvas.

The Catch: Fallback for Older Browsers

createImageBitmap with the imageOrientation option is well-supported in modern Chrome, Edge, Firefox, and Safari. However, if you need to support very old browsers, you still have to fall back to the older new Image() method (which means the image might look sideways on ancient devices).

For my tool, I decided the trade-off was worth it. The vast majority of users are on modern browsers, and fixing the bug for 99% of users was better than keeping complex legacy code.

The Conclusion

If you are building an image resizer, cropper, or compressor in the browser, don't rely on the <img> tag if you are dealing with mobile uploads. Use createImageBitmap and let the browser do the heavy lifting.

It is one line of code that saved me hours of debugging and a lot of math.

If you want to see the tool in action, you can try it here: https://toolsvibe.online/tools/image-resizer/

Have you dealt with the EXIF orientation bug before? How did you solve it?

Built Free, Privacy-First Tools for Pakistan Tax & Zakat (They Never Touch a Server)

khuram shahzad — Thu, 29 Oct 2026 00:25:42 +0000

I have a small ritual every tax season in Pakistan.

I open a calculator. I enter my salary. I wait. Then the result is locked behind an email signup, or the page is covered in ads that make my phone lag, or the calculator itself is using tax slabs from three years ago.

I got tired of it. So I built the version I wanted to exist: ToolsVibe — a collection of free tools that run entirely in your browser. No uploads, no signups, no "create an account to see your result."

This post is about why I built it this way, what is inside, and one technical decision that made it possible.

The privacy thing is not a promise. It is architecture.

Every tool site asks you to trust their privacy policy. Policies are words. Architecture is physics.

When a tool runs client-side, the browser reads your input, processes it in JavaScript, and hands you the result. There is no upload endpoint. There is nothing to trust because your data never leaves your device. You can open the network tab and watch: the only thing that loads is the page itself.

That constraint shaped everything. For an image resizer, the browser reads the file, draws it onto a canvas, resizes it, and gives you a download. For a tax calculator, the numbers are processed in a JavaScript function and rendered back to you. No server round trip. No file sitting in someone else's storage.

I used Astro for the site. It ships zero JavaScript by default and only loads the interactive scripts when you actually use a tool. For a tools site, that means the landing pages load fast and the heavy lifting only happens on the pages that need it.

What is inside (the short list)

Pakistan Tax & Zakat:

Salary Tax Calculator — take-home salary, FBR income tax, EOBI deductions, and slab breakdown for Tax Year 2027.
Freelancer Tax Calculator — IT export income and local freelance income.
Zakat Calculator — cash, gold, silver, and investments, with the Nisab calculation shown.
EMI Calculator — loan monthly payment, total interest, and yearly breakdown.

Image Tools:

Image Compressor, Image Resizer, Image Cropper, Image Converter — all the "this file is too big" and "this image is the wrong size" problems, without uploading your photos to a stranger's server.

Writing & Dev:

Word Counter, JSON Formatter, QR Code Generator, Password Generator, Unit Converter, Age Calculator, Percentage Calculator.

You can see the full list here: https://toolsvibe.online/tools/

One technical thing I learned

The hardest part of client-side tools is not the logic. It is memory.

A browser tab has limits. If you try to resize an 8000×6000 photo in one jump, the phone will struggle. The fix I used in the image resizer is progressive downscaling: if the target is less than half the original, halve it once, then again, until the image is close to the target size, then draw it once at the exact size. The edges stay sharper and the browser does not crash.

It is a small thing. But it is the difference between a tool that works on a phone and a tool that only works on a laptop.

What I am not doing (yet)

I am not adding ads right now. The site is new, and I would rather people use it and trust it first. When ads come, I will update the About page and Privacy Policy to say so clearly. The privacy claim about the tools themselves will not change, because the architecture will not change: your files and numbers still never leave the browser.

A question for you

If you build or use client-side tools: what is the one small annoyance you wish a browser-based tool would just solve, without asking for an account?

For me, it was tax calculators that hide the answer. I suspect everyone has their own version of that ritual.

DEV Community: khuram shahzad