我整天都在寻找解决方案,但似乎找不到合适的解决方案。
问题(我认为)非常简单。当图像上传到我的页面上时,它将显示在img元素中。现在,由于某种原因,它会自动从纵向旋转到横向。我剪掉中间人,并将img标签连接到路径。问题仍然存在。
如果我在ps中打开并将其另存为新的jpeg,则它是固定的,但这不是一个可行的选择,因为图像将直接从客户端上载。
在其他程序(ps,绘画,照片,photos3d)中不存在该问题
在我的挖掘过程中,我发现这可能是由图像的exif数据引起的。其他所有内容都会忽略该数据,或者正确读取它的idk。
谁能告诉我该如何解决?
我尝试添加image-orientation:0deg和image-orientation:from-image没有结果。
另外,出于我的理智,有人知道为什么这会是一个问题吗?
编辑这在Firefox上不会发生。话虽如此,我不能强迫所有人避免镀铬
提前致谢
好的,所以我到处看,发现了一些旋转图像客户端的方法,并添加了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);
}