javascriptjpegexifexif-js

Different rotation of image on PC and through input type file


Image is in jpeg format and it's being shown as it should on my PC (I'm using Ubuntu), but once I try to upload it through <input type="file"... while browsing for it, it displays as if it is rotated 90 degrees to the right. I have part of code in my app which rotates images based on EXIF.getTag(this, 'Orientation') parameter and it's returning number 8 for this case which implies that the image should be rotated to the left for 90 degrees, even it shouldn't (because it's already rotated on the PC).

What is causing this?

EDIT:

I found images containing exif parameter here. So once I download them using provided link, they are being properly shown on the PC, but are rotated when uploaded.


Solution

  • There are two main metadata tags for specifying image orientation:

    Orientation: [TopLeft, BottomRight, RightTop, LeftBottom]

    and

    exif:Orientation: [1, 3, 6, 8]

    I suspect your image was taken by a device, which uses exif:Orientation meta tag. Ubuntu default image viewer supports exif:Orientation and thus it displays the image correctly. Browsers, however, do not support this tag (for backward compatibility reasons) and they have to fall back to the default orientation which is rotated 90 deg to right in your case.

    You could solve your issue by supplementing your images with the Orientation meta tag. This could be done with most image viewing software by simply rotating your image and saving it in place (in Ubuntu you will see the image rotated properly, so simply rotate it in any direction and rotate it back and save).