錯誤的圖像旋轉

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