Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cropped image gets rotated #2194

Open
MaartenMostert opened this issue Nov 25, 2022 · 1 comment
Open

Cropped image gets rotated #2194

MaartenMostert opened this issue Nov 25, 2022 · 1 comment

Comments

@MaartenMostert
Copy link

Hello
When I upload an image and the resize it with it sometimes gets rotated.

I use the following definition:

<form id="profile-picture-dropzone" class="dropzone" action="upLoadFile" method="post" data-plugin="dropzone">
    <div class="fallback">
        <input name="file" multiple type="file"></input>
    </div>
    <div class="dz-message needsclick">
        <i class="h1 text-muted dripicons-cloud-upload"></i>
        <h3>Drop image file here or click to upload.</h3>
        <span class="text-muted font-13">modify the accounts user image</span>
    </div>
</form>
 let myDropzone = new Dropzone("#profile-picture-dropzone", {
        url: "upLoadFile",
        headers: {
            "user_mail": data.mail
        },
	uploadMultiple:"false",
	resizeWidth:"250",
	resizeHeight:"250",
    });

Expected behavior
Most of the time the image gets cropped correctly without rotating it, but some images however are getting rotated 90 degrees or 180 degrees.

Screenshots
See enclosed screenshot

Browser / OS:

  • OS & Device: [Mac OS Ventura]
  • Browser [Chrome]
  • Version [Version 107.0.5304.110 (Official Build) (x86_64)]

Additional context

dropzone

@DrPeeps
Copy link

DrPeeps commented Mar 2, 2023

I can confirm this behaviour. It's not just "sometimes" however; it happens to all photos that are taken from a camera angle other than the standard horizontal (left tilt). Using either vertical orientation will cause the uploaded image to be turned sideways, and the horizontal right tilt orientation will cause the uploaded image to be upside-down. (The images appear this way in various browsers (Firefox, Android Chrome) as well as in the file viewer IrfanView.)

This does not affect the thumbnails Dropzone displays - only the uploaded files themselves when resizing parameters are used.

What seems to be happening: Dropzone removes the EXIF information (which includes the camera orientation) before it resizes and rotates the image, then replaces the EXIF information again after. I'm not sure why it should be rotating the image at all, but if it does, the original EXIF orientation should not be restored - it results in an incorrectly rotated image.

My personal solution for now: I took the Dropzone 5.9.3 Javascript file and removed the following lines from the resizeImage() method (which is the part that restores the EXIF information):

          if (
            resizeMimeType === "image/jpeg" ||
            resizeMimeType === "image/jpg"
          ) {
            // Now add the original EXIF information
            resizedDataURL = ExifRestore.restore(file.dataURL, resizedDataURL);
          }

This fixes everything. A side effect of course is that the uploaded images will be stripped of EXIF information, but in my case, that's what I want anyway (for privacy).

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

No branches or pull requests

2 participants