Złe obracanie obrazu

Question

Mam problem z JavaScript podczas renderowania obrazu przed przesłaniem w poprawnym obrocie. Wygląda na to, że gdy renderujesz obraz mający prawidłową rotację tylko na danych exif, przeglądarka go nie używa.

Użytkownicy widzą inny obrót między tym, co mają w swoim systemie, kiedy obraz jest wyświetlany na stronie przez JavaScript.

Kod jest bardzo prosty:

Wiesz prosty sposób rozwiązać ten błąd rotacji?

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

Dziękuję za uwagę.

Answer 1

co prosicie to nic nowego ... to sprawdzić: https://bugzilla.mozilla.org/show_bug.cgi?id=298619

To dzik został otwarty w 2005 roku i nie został jeszcze rozwiązany. Ten artykuł jest stary, ale naprawdę solidny: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

Ale kluczowa część jest tam gdzieś daleko, gdzie zauważa, że ​​przeglądarka zwykle nie stosuje rotacji exif w kontekście znacznika html img, ale może ją honorować, gdy otwarcie obrazu we własnej zakładce.

Tak więc domyślnie żadna przeglądarka nie zrobi tego domyślnie, aplikacje internetowe, które wydają się to robić, najczęściej otrzymują tę wartość na serwerze i obsługują różne zasoby.

Ale wygląda na to, że jest nadzieja, jeśli chcesz, aby włamać się go w: Accessing JPEG EXIF rotation data in JavaScript on the client side