图像旋转不正确

Bad image rotation

本文关键字:不正确 旋转 图像      更新时间:2023-09-26

在上传前以正确的旋转方式渲染图像时,我遇到了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;
}

感谢您的关注。

您所要求的并不是什么新鲜事。。。看看这个: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旋转,但在自己的选项卡中打开图像时可能会遵守它

因此,目前默认情况下没有浏览器会这样做,似乎这样做的网络应用程序大多在服务器上获得该价值,并提供不同的资产。

但如果你想破解它,看起来还是有希望的:在客户端访问JavaScript中的JPEG EXIF旋转数据