イメージローテーションが正しくありません

Question

正しいローテーションでアップロードする前にイメージをレンダリングする際にJavaScriptに問題があります。画像魔法使いをexifデータ上でのみ正しい回転をするようにレンダリングすると、ブラウザはそれを使用しないようです。

JavaScriptを使用してウェブサイト上に画像が表示されているときに、システム上のさまざまな変化を見ることができます。

コードは非常に基本的なものです：

あなたは、この回転のバグを修正するための簡単な方法を知っていますか？

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

ありがとうございました。

Answer 1

何を求めていることは新しいものではありません...これをチェックアウト：https://bugzilla.mozilla.org/show_bug.cgi?id=298619

吸盤は2005年にオープンした、まだ解決されていません。この記事は古いですが、本当に堅牢です：http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

しかし、そこのキーパーツは、HTMLのimgタグのコンテキストでブラウザが通常はexifローテーションを適用しないことに注意していますが、それ自身のタブで画像を開きます。

現在のところ、ブラウザはデフォルトでそれを行いません。そのように思えるウェブアプリケーションは、ほとんどがサーバー上でその価値を得て、さまざまな資産を提供しています。 Accessing JPEG EXIF rotation data in JavaScript on the client side