错误的图像旋转

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