Skip to content

Fix exif orientation issue when resizing images.#2001

Open
kaymes wants to merge 2 commits into
dropzone:mainfrom
kaymes:fix-exif-orientation-issue
Open

Fix exif orientation issue when resizing images.#2001
kaymes wants to merge 2 commits into
dropzone:mainfrom
kaymes:fix-exif-orientation-issue

Conversation

@kaymes

@kaymes kaymes commented Jun 18, 2021

Copy link
Copy Markdown

This PR fixes the issue with exif orientation when resizing image described in #1967.

With this PR, Exif data is removed from the image before resizing it. This way the browser doesn't fix the orientation and everything is correct when the Exif information is added to the resized image afterwards.

Initially I tried to re-use some of the code of the existing ExifRestorer. However, it proved to be quite slow with to do the base64 encoding/decoding of that class. Thus, I wrote a much simpler and faster version of it which uses the builtin atob() and btoa() functions and subsequently uses strings instead of arrays.
Since this proved effective I also changed the Exif restore code to a simpler and faster function and removed the ExifRestorer.

Unfortunately I haven't worked out how to build the distribution files so I could only do limited testing.

kaymes and others added 2 commits June 18, 2021 11:25
Rewrite of the existing exif handling code to use built in base64 operations which are much faster.
@enyo

enyo commented Oct 26, 2021

Copy link
Copy Markdown
Collaborator

Woah what a PR! Thanks for that. I'd like to get this in, but how should I be testing this? Can you describe the use cases where it failed before and how you fixed it? I think using the atob and btoa functions is great call now that Dropzone is dropping IE support.

@kaymes

kaymes commented Oct 26, 2021

Copy link
Copy Markdown
Author

It's been a while since I wrote this. As far as I remember the failure case is the following:

  • user adds an image which has a non-standard exif orientation set. A portrait mode picture from a phone (or digital camera which automatically orients according to gravity) usually has non-standard exif orientation.
  • Dropzone resizes the image before uploading it to the server.

Before this PR: the version which arrives on the server is no longer oriented correctly when viewed with an exif-aware image viewer. (It is because the physical orientation has changed but the exif information wasn't updated which leads to the viewer to rotate the image again).
After this PR: the version which arrives on the server is oriented the same as the original. (because the physical orientation is unchanged so the exif information is still correct).

The test I would suggest is to take a picture with a mobile phone in portrait mode and configure Dropzone to resize images before the upload. If this all works as expected, then it should be ok.

@alex-levy

Copy link
Copy Markdown

@enyo any update on this? This is currently blocking our adoption of this library.

@Jaammeesss

Copy link
Copy Markdown

@enyo is there any updates on this as the issue for phone portrait images being uploaded in the incorrect orientation after upload is still an issue with resizing

@jordanade

Copy link
Copy Markdown

@enyo any update?

@TheDude70

Copy link
Copy Markdown

Will this get merged any time soon?

@DanielStout5

DanielStout5 commented Jun 21, 2022

Copy link
Copy Markdown

@enyo will this PR get merged? I'm seeing the issue it describes - upload a portrait oriented image with resizeWidth specified and it ends up being incorrect in the processed image. The thumbnail is correct.

Including the exif-js library actually made it worse - with that library available, both the thumbnail and the full image end up being incorrect.

I put up a npm package with @kaymes's fix merged into the 5.9.3 commit here: https://www.npmjs.com/package/dropzone-exif-fix and it seems to work great.

pryley added a commit to pryley/dropzone-v6 that referenced this pull request Aug 1, 2022
@dazbradbury

Copy link
Copy Markdown

Any chance the fix for this will be applied to master, or any of the new releases?

@Pes8

Pes8 commented Dec 16, 2022

Copy link
Copy Markdown

MERGE IT PLEASE 🐊

@MentalGear

Copy link
Copy Markdown

Merge for #2081

@hcw-rohan

Copy link
Copy Markdown

Currently using this lib in dev for my app but it won't make it to production unless this is fixed. Please merge 😄

NicolasCARPi added a commit to NicolasCARPi/dropzone that referenced this pull request Apr 13, 2024
@NicolasCARPi

Copy link
Copy Markdown

Hello everyone,

I have just merged this PR on the maintained fork (@deltablot/dropzone). Keep an eye out for the next release: https://github.com/NicolasCARPi/dropzone/releases

Best,
~Nicolas

@NicolasCARPi

Copy link
Copy Markdown

New release is live with this patch: https://github.com/NicolasCARPi/dropzone/releases/tag/7.1.1

@redvivi

redvivi commented Nov 16, 2024

Copy link
Copy Markdown

Why is it not merged actually?

@NicolasCARPi

Copy link
Copy Markdown

Why is it not merged actually?

Are you using the fork? See my comment above:

#2001 (comment)

@redvivi

redvivi commented Nov 16, 2024

Copy link
Copy Markdown

No, it is available on JSDelivr @NicolasCARPi ?

@NicolasCARPi

Copy link
Copy Markdown

is it available on JSDelivr?

Yes: https://cdn.jsdelivr.net/npm/@deltablot/dropzone/dist/dropzone-min.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.