Rotazione immagine errata

Question

Ho un problema con JavaScript durante il rendering di un'immagine prima del caricamento in una rotazione corretta. Sembra che quando si esegue il rendering della strega dell'immagine abbia la rotazione corretta solo su dati exif il browser non la usa.

Gli utenti vedono una rotazione diversa tra ciò che hanno sul proprio sistema quando l'immagine viene visualizzata sul sito Web da JavaScript.

Il codice è molto semplice:

Conoscete un modo semplice per correggere questo bug di rotazione?

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; 
} 

Grazie per l'attenzione.

Answer 1

Quello che chiediamo è niente di nuovo ... check this out: https://bugzilla.mozilla.org/show_bug.cgi?id=298619

che sucker stato aperto nel 2005 e non è stato ancora risolto. Questo articolo è vecchio ma davvero robusto: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

Ma la parte fondamentale in questo è un po 'più in basso, dove nota che il browser di solito non applica la rotazione exif quando si trova nel contesto di un tag html img, ma può onorarlo quando aprendo l'immagine nella propria scheda.

Quindi al momento nessun browser lo farà per impostazione predefinita, le app Web che sembrano farlo per lo più ottengono quel valore sul server e servono su diverse risorse.

ma sembra che c'è speranza se si vuole incidere in: Accessing JPEG EXIF rotation data in JavaScript on the client side