Orientation fix vs Image Exif

[burukan]

We have been working on photo upload and orientation vs auto-resizing.

We have been having problems with photo upload and I just wanted to check few things with you dropzone team.

Code seems to have "fixOrientation" that is always set as true (guess this was not supposed to be set via options?). That seems to read EXIF if possible (via library) and auto-rotate the image if needed.

Questions/Concerns

• When an image is auto-rotated (and even more so, resized too), is this new rotation information also saved/updated with the new EXIF (if any beforehand?)
  if (resizeMimeType === 'image/jpeg' || resizeMimeType === 'image/jpg') { // Now add the original EXIF information resizedDataURL = ExifRestore.restore(file.dataURL, resizedDataURL); }
  I may be wrong but that code seemingly just restores the original EXIF info without taking the automatic file rotational changes into consideration?

• While not totally related to above question I have noticed that an online search also seems to point that line to be culprit to many orientation problems on thumb display. I may open feature request to have callback support so that we can override the URL via returned data on server.

• If this orientation/exif feature-set is not complete, are there any interim plans to have option to "ignore orientation work (exif or otherwise)" and do resize/upload without that meta?

I happen to be mainly a backend developer I have not had time to fully check this but will dig further soon.

Thanks!

[kaymes]

I just ran into the same issue and decided to find a solution.

The issue is indeed that the Exif information is restored the way it was on the original image. However, the parameter fixOrientation doesn't help here. What happens is this:

1. The browser loads the image and interprets the exif tag (which means the image is rotated correctly).
2. The image is resized which strips all the exif information (but now the image is physically rotated).
3. The original exif information is restored but now the orientation information is wrong because the image is already rotated.

The possible solutions I could think of are are:
a) don't restore the exif info and leave the file without.
b) fix the exif info so the orientation is set to TOPLEFT (1).
c) remove the exif info before resizing so the browser doesn't see it (which means the file won't be physically rotated).

I didn't like a) because one looses the exif information completely. I didn't know how to do b). So implemented c).

Edit: It's an ugly hack at the moment, I'll try to clean it up and submit it as a PR hopefully soon. I submitted a cleaned up version as PR.

[dazbradbury]

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

[eelkefierstra]

This is breaking our photo uploads, when will this get fixed?

We use the resizeWidth-option to reduce the upload size. But the images now get rotated multiple times (by dropzone before upload, and by our code before showing on website), because the EXIF information still reflects the original orientation before the image got rotated.

I can supply testing images if necessary.

[NicolasCARPi]

Hello everyone,

The PR by @kaymes has been merged in the maintained fork (@deltablot/dropzone). See: https://github.com/NicolasCARPi/dropzone/releases/tag/7.1.1

[mortenthansen]

As a temporary fix one may replace the transformFile function with a resizeImage version that does not restore EXIF data:

transformFile(file, done) {
      if (
        (this.options.resizeWidth || this.options.resizeHeight) &&
        file.type.match(/image.*/)
      ) {
        return this.createThumbnail(
          file,
          this.options.resizeWidth,
          this.options.resizeHeight,
          this.options.resizeMethod,
          true,
          (dataUrl, canvas) => {
            if (canvas == null) {
              // The image has not been resized
              return done(file);
            } else {
              let { resizeMimeType } = this.options;
              if (resizeMimeType == null) {
                resizeMimeType = file.type;
              }
              let resizedDataURL = canvas.toDataURL(
                resizeMimeType,
                this.options.resizeQuality
              );
              // Note: No restoring of EXIF data on resized image.
              return done(Dropzone.dataURItoBlob(resizedDataURL));
            }
          }
        );
      } else {
        return done(file);
      }
    },

[NicolasCARPi]

As a temporary fix

.... or you can use the maintained fork that includes a fix ;)