Fix Mobile Photo Rotation Issues with EXIF and Canvas

Introduction

When uploading photos captured via the

<input type="file">

element on mobile browsers, some devices (e.g., iPhone, certain Samsung models) rotate the image 90° when taken in portrait mode. By reading the EXIF Orientation tag and applying a canvas rotation, the image can be displayed correctly.

EXIF Orientation

Mobile cameras embed an EXIF Orientation tag. The common values are:

0° – value 1 (normal)

Clockwise 90° – value 6

Counter‑clockwise 90° – value 8

180° – value 3

Portrait photos from phones that report

Orientation = 6

need a 90° clockwise rotation to appear upright.

The lightweight

exif.js

library can read this tag; the author trimmed the original 30 KB script to a few kilobytes.

Rotating the Image

Canvas provides the

rotate()

method, which expects an angle in radians (

degrees * Math.PI / 180

). The rotation origin is (0,0); after rotating, the drawing coordinates must be shifted so the image stays within the visible area.

For a 90° clockwise rotation, translate the canvas by (0, ‑height) before calling

drawImage()

. Similar translations apply for –90° and 180° rotations.

Compressing the Photo

Because mobile photos are large and Base64‑encoded data URLs increase size further, it is advisable to down‑scale the image and reduce its quality before upload. First, limit the width/height while preserving aspect ratio, then call

canvas.toDataURL()

with the desired format (e.g.,

image/jpeg

) and a quality factor between 0 and 1.

Full Example

The complete trimmed

exif.js

source and demo code are available at https://github.com/lin-xin/blog/tree/master/file-demo. The core snippet reads the Orientation tag, rotates the canvas accordingly, and compresses the result.