图像在 iPad 上而不是在笔记本电脑上旋转

Question

我创建了一个小型测试站点，您可以在其中上传图片。并且无需往返后端，将显示所选图片。到目前为止还没有什么很有趣的

$('input').on('change', function () {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function (event) {
        var base64 = event.target.result;
        $('<img>').attr('src', base64).appendTo('body');
    };
    reader.readAsDataURL(file);
});

但是，我注意到在我的 iPad3 上有些图片是上下颠倒的。我在谷歌上找到了关于存储在图像（base64）中的 EXIF 元数据，它定义了图片的方向。但另一件事是，在我的笔记本电脑上，图像显示正常（当然是相同的图片）。有什么方法可以防止/修复这种行为的发生吗？ （我希望它们以相同的方式显示图片，如果可能的话，我还希望它们正常显示（而不是上下颠倒））

Answer 1

这不是 CSS 问题。这实际上是图像的问题。一些浏览器通过元数据解释图像的方向。只需在任何图像编辑软件中打开图像并将其导出即可。将其上传到您的服务器，让我知道这是否有效！

编辑 - 参考此 URL 以获得可能的解决方案： Accessing JPEG EXIF rotation data in JavaScript on the client side