上传图片方向问题

Question

我整天都在寻找解决方案，但似乎找不到合适的解决方案。

问题（我认为）很简单。当图片上传到我的页面时，它会显示在 img 元素中。现在由于某种原因，它自己从纵向旋转到横向。我切断了中间人并将 img 标签连接到路径。问题仍然存在。

如果我在 ps 中打开它并将其另存为新的 jpeg，它是固定的，但这不是一个可行的选择，因为图像将直接从客户端上传。

在其他程序（ps、paint、photos、photos3d）中是否存在该问题

在我的挖掘中，我发现这可能是由图像的 exif 数据引起的。其他一切都会忽略该数据，或者正确读取它。

谁能告诉我如何解决这个问题？

我尝试添加 image-orientation:0deg 和 image-orientation:from-image 没有结果。

此外，为了我的理智，有谁知道为什么这会是个问题？

编辑这不会发生在 firefox 上。话虽这么说，我不能强迫每个人都避免chrome

提前致谢

Answer 1

好的，所以我四处寻找并找到了一些旋转图像客户端的方法并添加了 css 以使其看起来合法。然后我意识到所有这些都被浪费了，因为它会导致图像在正确显示它的浏览器中过度旋转。

最终将它带到服务器端并在那里修复它（基于 exif 旋转并删除 exif 数据）

我会包含控制器代码

public JsonResult NormalizeOrientation(HttpPostedFileBase file)
    {
        Image img = Image.FromStream(file.InputStream);
        if (Array.IndexOf(img.PropertyIdList, 274) > -1)
        {
            var orientation = (int)img.GetPropertyItem(274).Value[0];
            switch (orientation)
            {
                case 1:
                    // No rotation required.
                    break;
                case 2:
                    img.RotateFlip(RotateFlipType.RotateNoneFlipX);
                    break;
                case 3:
                    img.RotateFlip(RotateFlipType.Rotate180FlipNone);
                    break;
                case 4:
                    img.RotateFlip(RotateFlipType.Rotate180FlipX);
                    break;
                case 5:
                    img.RotateFlip(RotateFlipType.Rotate90FlipX);
                    break;
                case 6:
                    img.RotateFlip(RotateFlipType.Rotate90FlipNone);
                    break;
                case 7:
                    img.RotateFlip(RotateFlipType.Rotate270FlipX);
                    break;
                case 8:
                    img.RotateFlip(RotateFlipType.Rotate270FlipNone);
                    break;
            }
            // This EXIF data is now invalid and should be removed.
            img.RemovePropertyItem(274);

        }
        MemoryStream ms = new MemoryStream();
        img.Save(ms, ImageFormat.Jpeg);
        return Json(new { base64imgage = Convert.ToBase64String(ms.ToArray()) }
      , JsonRequestBehavior.AllowGet);
    }

上传图片方向问题

uploaded image orientation issues

image

orientation

exif