search

safrazik / vue-file-agent

The most beautiful and full featured file upload component for Vue JS
https://safrazik.github.io/vue-file-agent/
MIT License
731 stars 93 forks source link

Incorrect preview image orientation #186

Open justinas55 opened 2 years ago

justinas55 commented 2 years ago

Describe the bug Selecting/drag'n'dropping JPG image with rotation metadata results in incorrectly orientated preview image. (Uploaded image is correct)

To Reproduce Steps to reproduce the behavior:

  1. Go to demo page https://safrazik.github.io/vue-file-agent/
  2. Add JPG with rotation (example image https://github.com/recurser/exif-orientation-examples/blob/master/Landscape_6.jpg)
  3. See that preview image is rotated incorrectly

Expected behavior Preview image should have correct orientation.

Screenshots vue-file-agent preview in demo: image same image in Windows Photos preview: image

Desktop (please complete the following information):

Additional context I see same issue already fixed here https://github.com/safrazik/vue-file-agent/issues/28 , but I guess there were some breaking changes in browser compatibility last years: https://paul.kinlan.me/correct-image-orientation-for-images-chrome-81/ .

Also viewing example JPG in Internet Explorer https://github.com/recurser/exif-orientation-examples/blob/master/Landscape_6.jpg - orientation is not respected, though in current versions of Chrome, Edge - it is correctly rotated.

jay-p-b-7span commented 2 years ago

image

It seems like Width is less than Height . Width = 1200px , height = 1800px. Therefore native browser functionality would be to rotate it when previewed.

image

justinas55 commented 2 years ago

Hello, thanks for answer.

I don't think it is related to width/height - it does not determine orientation of image, but EXIF metadata in JPEG does.

What I found and wrote in my report was that it seems not respecting EXIF orientation was normal in earlier browser versions (as Internet explorer still does that). But later and currently most browsers do rotate themselves (see https://paul.kinlan.me/correct-image-orientation-for-images-chrome-81/), so it is not needed to manually rotate by examining EXIF data.

In your screenshot it seems that preview in your file manager also does not respect EXIF orientation.

Again thanks for looking into this, and sharing this library.

edum18 commented 8 months ago

Having the same issue, still not fixed?