1

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.

nikname
  • 151
  • 1
  • 14

1 Answers1

1

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

83C10
  • 1,112
  • 11
  • 19
  • Thanks, that's probably the case. But the problem is that I need to do this somehow through code, because this problem was reported by the users who use app I am working on. Is there a way to do the process that I would normally do through "image viewing software" using JavaScript? – nikname Nov 18 '20 at 10:56
  • 1
    @nikname You could create 3 CSS classes for each rotation angle and apply them according to the output of the `EXIF.getTag(this, 'Orientation')`. There's also a tool you can use to handle the issue for you: [JavaScript-Load-Image](https://github.com/blueimp/JavaScript-Load-Image) – 83C10 Nov 18 '20 at 11:46
  • I saw it and probably gonna use it. Thank you – nikname Nov 18 '20 at 11:49