SJRK-286: Some images being uploaded with incorrect orientation

Description

Some images are being uploaded with incorrect orientation, even though such metadata likely exists in the image file.

To reproduce:

• find a JPEG image with EXIF data containing an orientation value other than 1
• if you're running from the pull request branch (https://github.com/fluid-project/sjrk-story-telling/pull/50), you can refer to the test images in the "tests\testData" directory
• add a new image block and upload that image

Expected: the image will be the correct orientation that matches what is seen in the Finder upload dialog or on the mobile device (see attached screenshot "working")

Actual: the image is rotated 90 or 180 degrees and looks incorrect (see attached screenshot "not working")

The image will have the incorrect orientation both in the story editor preview as well as in the published story

Environments

MacOS (version?)
both in Safari and Chrome

Attachments

Comments

• Justin Obara commented 2019-09-13T07:49:39.671-0400

  This may actually be an issue with the browser and not the exif on the uploaded image. We'd need to verify what is stored on the server, but from what I understand is that many browsers do not use the orientation information from the exif data. Firefox currently supports theimage-orientation CSS property, which you can set to from-image. I actually added this to the upload preview but forgot to check it for the story viewer. https://github.com/fluid-project/sjrk-story-telling/blob/stories-floe-dev/themes/base/css/storyTelling.css#L279

  Here is some more information from stack overflow: https://stackoverflow.com/a/42428659

• Gregor Moss commented 2019-10-09T14:47:51.113-0400

  Cindy found this on SO, also relevant: https://stackoverflow.com/questions/27049724/amazon-s3-flipping-portrait-image-in-browser

• Gregor Moss commented 2019-10-09T14:49:07.029-0400

  Cindy also found this: https://github.com/GoogleChromeLabs/squoosh/issues/299

• Gregor Moss commented 2019-10-11T17:13:51.061-0400

  This may be promising, could potentially add this as Kettle middleware called on image save: https://www.npmjs.com/package/jpeg-autorotate

• Gregor Moss commented 2019-10-15T15:31:24.157-0400

  the image-orientation property is now deprecated and should not be depended upon to solve this issue. It would seem that the rotate-upon-saving approach is the best for the time being. I have begun implementing jpeg-autorotate to this end.

  https://www.w3.org/TR/css-images-3/#propdef-image-orientation

• Cindy Li commented 2019-11-20T10:50:23.473-0500

  The pull request has been merged into the project repo "stories-floe-dev" branch at this commit.