Wysiwyg-editor: Portrait-orientation images uploaded to Froala display as landscape

[kmacampbell]

Expected behavior.

A portrait-orientation image uploaded to Froala respects the Exif orientation header and displays as expected (i.e., portrait-orientation retained)

Actual behavior.

A portrait-orientation image uploaded to Froala does not respect the Exif orientation header and displays as landscape

Steps to reproduce the problem.

1) Navigate to Froala demo site on a mobile device
2) Upload a portrait-orientation image
3) Once uploaded, Froala displays in landscape mode

OS.

Android (Samsung Galaxy S6)

Browser.

Chrome 55

[stefanneculai]

The editor is not doing any changes on how the images are being taken. The editor only uploads the images and then they are being served back. I believe that somehow there are some other infos there on the phone that aren't passed.

[jamesmoss]

I'm seeing this same issue and it's not related to the phone. It's because the orientation of the photo is stored in EXIF data and this data is not being honoured when Froala is presenting the image back. See this SO answer for more details http://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images

This library has support for automatically rotating the images based on EXIF data: https://github.com/blueimp/JavaScript-Load-Image

If you didn't want to import the entire library you could use the logic from this file to roll your own solution https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js

[stefanneculai]

@jamesmoss we are just loading in the editor the image which has been uploaded to the server as SRC to the image. I believe the right way of doing this would be to make changes to the image on server side when it is stored instead of client side when the image is being loaded.

[jamesmoss]

@stefanneculai That would work but the preview you see while it's uploading would still be the wrong orientation.

I can see the problem is that in the _startUpload method in image.js where you're using FileReader to grab the image and display it before upload. This approach doesn't read the EXIF data so the blob you have isn't orientated correctly. I am probably going to have to fix this in my company's version of Froala (we have paid for a full license so have access to the source) - how can I contribute these fixes back to you?

[steve-tapley]

Hi,
Any chance of this issue being fixed - we're running into it in 2.7
Cheers,
Steve

[jamesmoss]

@steve-tapley In the end we did hack up the image plugin to add this behaviour as I described above (we also added support to resize the image down if its above certain dimensions). I wish it was in built-in by default.

[steve-tapley]

@stefanneculai Any chance of this being fixed as per @jamesmoss comment above?

[stefanneculai]

@steve-tapley we're taking this into consideration, however, I don't have a response yet.

[dobon]

This is a significant BUG in Froala... Why was this thread closed before you understood the problem? OP explains quite clearly that the problem is with the EXIF rotation data not being respected. When will the fix provided by @jamesmoss be merged? It has been 3 months and he is offering you the code patch on a silver platter...

[stefanneculai]

@dobon this is in our attention and most likely we're going to create a plugin specially for that. Unfortunately, I don't have an ETA to share at this moment.

[edrumh]

Any update on this fix?

[mockey-jockey]

any update on this fix? @stefanneculai

[jtrain]

Hi @stefanneculai I'm adding my support for a plugin that would help out here. We have a full license and alternatively we'd write this ourselves.

[stefanneculai]

It is already on our roadmap: https://wysiwyg-editor-roadmap.froala.com/public/ideas/4174. Would be extremely helpful if you can upvote it there.

[jhubert]

@jamesmoss This is biting us as well. Any chance you'd be able to share / open source the code hack you added?

[jamesmoss]

@jhubert We had to pay for a license to access Froala's source code and then fork the image module to add our changes. Unfortunately because Froala is not open source I can't share it with you.

[karellodewijk]

This is closed, but definitely not fixed, I'm adding an example image as an attachment. Here's an example of a protrait orientated image: https://s3-eu-west-1.amazonaws.com/teo-s3-dev/froala%2F1578670746534-IMG_0176.JPG

[TGeRi]

Anyone subscribed to this topic: upvote the feature request here: https://wysiwyg-editor-roadmap.froala.com/public/ideas/4174