Bad image rotation

Question

I have a problem with JavaScript when rendering an image before loading with the right rotation. It seems that when you render an image that has the correct rotation only according to exif data, the browser does not use it.

Users see a different rotation between what they have on their system when the image is displayed on the website using JavaScript.

The code is very simple:

Do you know an easy way to fix this rotation error?

LbEmeraude.handleImage = function (f) { if (f.type.match('image.*')) { var reader = new FileReader(); reader.onload = (function (file) { return function (e) { var image = {}; image.dataAsUrl = e.target.result; LbEmeraude.renderImage(image); }; })(f); var image = reader.readAsDataURL(f); } } LbEmeraude.renderImage = function (image) { var eImage = LbEmeraude.createImgElement(image.dataAsUrl); $('someElement').append(eImage); }; LbEmeraude.createImgElement = function (src) { var image = document.createElement("img"); image.src = src; return image; } 

Thank you for your attention.

Answer 1

What you ask for is nothing new ... check this out: https://bugzilla.mozilla.org/show_bug.cgi?id=298619

This suction cup was opened in 2005 and has not yet been authorized. This article is old but really reliable: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

But the key part in it is quite far away, where he notes that the browser usually does not use exif rotation when in the context of the html img tag, but can read it when opening the image on its tab.

So, now the browser will not do this by default, web applications that seem to do this basically get this value on the server and serve different assets.

But there seems to be hope if you want to hack it into: Accessing JPEG EXIF ​​data for rotation in client-side JavaScript