Warm tip: This article is reproduced from stackoverflow.com, please click
image orientation exif

uploaded image orientation issues

发布于 2020-03-31 22:56:16

i've been looking for a solution for the whole day but don't seem to be able to find a proper solution.

The problem is (i think) quite simple. When an image is uploaded on my page it is then displayed in an img element. Now for some reason it is rotated by itself from portrait to landscape. I cut the middle man and connected the img tag to the path. Problem persists.

If i open it in ps and save it as a new jpeg it is fixed but that is not a viable choice since images will be uploaded directly from clients.

In not other program (ps, paint, photos, photos3d) does that issue exist

In my digging around i found that that is propably caused from the exif data of the image. Everything else ignores that data, or reads it correctly idk.

Can anyone please tell me how to fix that?

I tried adding image-orientation:0deg and image-orientation:from-image to no result.

Also, just for my sanity's sake, does anyone know WHY this would be a problem?

EDITThis does not happen on firefox. That being said i cannot force everyone to avoid chrome

Thanks in advance

Questioner
MrNutbutters
Viewed
42
MrNutbutters 2020-01-31 19:27

Ok so i looked everywhere and found some ways to rotate the image client side and added css to make it look legit. Then i realized that all that was wasted since it would cause the image to overrotate in browsers that displayed it correctly.

Ended up taking it to server side and fixing it there (rotating based on exif and the removing the exif data)

I will include the controller code

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);
    }