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

图像旋转不良

1 个答案: