Uploading picture from mobile is showing up sideways

Question

I have an option to upload an image

<input class="images" type="file" id="item" name="Images" />

it then gets saved to my project like this

Guid g = Guid.NewGuid();
                Images.SaveAs(Server.MapPath("~/Uploads/" + g + ".jpg"));
                fileNames = g.ToString() + ".jpg";

for some reason when someone uploads a picture to the site from mobile it shows up sideways?

Take a look at this answer on exif orientation: http://stackoverflow.com/questions/27835064/get-image-orientation-and-rotate-as-per-orientation — nixkuroi, Apr 19 '17 at 17:40
You'll need to examine the image metadata (exif) then rotate based on one of the eight orientations. This can be done in javascript before upload or on the server. — Jasen, Apr 19 '17 at 17:50

JosephStyons · Answer 1 · 2017-04-19T18:10:54.123

You can look at the metadata of the file to see which way it is rotated.

Specifically, pull the image in as a .NET Image type, then call img.GetPropertyItem(&H112).Value(0).

That will return an integer, which represents the "rotation value" of the image.

1 = Landscape
3 = Upside-down
6 = Rotated 90 degrees left
8 = Rotated 90 degrees right

Once you know that, you can then rotate the image using the img.RotateFlip method.

Below is a class I wrote to solve very similar problems.

The relevant code is in the RotateImage method.

Note: this was in VB.NET and I ran it through the telerik code converter, so my apologies for any weird syntax

//get the image from the file they gave us, resize it, and rotate it if needed
    OnlineImage onlineImageHelper = new OnlineImage(Context.Request.Files(0).InputStream);
    byte[] pictureLarger = onlineImageHelper.StraightenedThumbnail(new Size(180, 180));
    byte[] pictureSmaller = onlineImageHelper.StraightenedThumbnail(new Size(80, 80));

using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;

public class OnlineImage
{
    public OnlineImage()
    {
        throw new NotImplementedException();
    }

    public OnlineImage(Stream imageStream)
    {
        _ImageFromUser = Image.FromStream(imageStream);
        RotateImage();
    }

    private Image _ImageFromUser;
    private Image _RotatedImage;
    private Image _ResizedAndRotatedImage;

    private void RotateImage()
    {
        if (_RotatedImage == null && _ImageFromUser != null && _ImageFromUser.PropertyIdList != null && _ImageFromUser.PropertyIdList.Contains(0x112)) {
            int rotationValue = _ImageFromUser.GetPropertyItem(0x112).Value(0);
            switch (rotationValue) {
                case 1:
                    // landscape, do nothing
                    break;
                case 8:
                    // rotated 90 right
                    // de-rotate:
                    _ImageFromUser.RotateFlip(rotateFlipType: RotateFlipType.Rotate270FlipNone);
                    break;
                case 3:
                    // bottoms up
                    _ImageFromUser.RotateFlip(rotateFlipType: RotateFlipType.Rotate180FlipNone);
                    break;
                case 6:
                    // rotated 90 left
                    _ImageFromUser.RotateFlip(rotateFlipType: RotateFlipType.Rotate90FlipNone);
                    break;
            }
            _RotatedImage = _ImageFromUser;
        }
    }

    private void ResizeImage(Size size, bool preserveAspectRatio = true)
    {
        int newWidth = 0;
        int newHeight = 0;
        if (preserveAspectRatio) {
            int originalWidth = _ImageFromUser.Width;
            int originalHeight = _ImageFromUser.Height;
            float percentWidth = Convert.ToSingle(size.Width) / Convert.ToSingle(originalWidth);
            float percentHeight = Convert.ToSingle(size.Height) / Convert.ToSingle(originalHeight);
            float percent = percentHeight < percentWidth ? percentHeight : percentWidth;
            newWidth = Convert.ToInt32(originalWidth * percent);
            newHeight = Convert.ToInt32(originalHeight * percent);
        } else {
            newWidth = size.Width;
            newHeight = size.Height;
        }

        _ResizedAndRotatedImage = new Bitmap(newWidth, newHeight);

        using (Graphics graphicsHandle = Graphics.FromImage(_ResizedAndRotatedImage)) {
            graphicsHandle.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphicsHandle.DrawImage(_ImageFromUser, 0, 0, newWidth, newHeight);
        }
    }

    public byte[] StraightenedThumbnail(Size resizedDimensions)
    {
        byte[] result = null;
        MemoryStream msPicture = new MemoryStream();
        ResizeImage(resizedDimensions);
        if (_ResizedAndRotatedImage != null) {
            _ResizedAndRotatedImage.Save(msPicture, ImageFormat.Png);
            result = msPicture.ToArray();
            return result;
        }

        return null;
    }
}

Images is a HttpPostedFileBase isn't that a .NET Image type? Why does it not know what .GetPropertyItem is? — Newbie, Apr 19 '17 at 18:31
When I said ".net image type", I was referring to the type "System.Drawing.Image" — JosephStyons, Apr 19 '17 at 19:05
hmm I am trying. Shouldn't this work? Images.SaveAs(Server.MapPath("~/Uploads/" + g + ".jpg")); fileNames = g.ToString() + ".jpg"; Image img = Image.FromFile(fileNames); What am I doing wrong? — Newbie, Apr 19 '17 at 19:27
Found this helpful blog post: https://www.cyotek.com/blog/handling-the-orientation-exif-tag-in-images-using-csharp One point mentioned in this post is to remove the EXIF Orientation tag after correctly rotating the image before saving it again — bmode, Jul 31 '20 at 22:17

Uploading picture from mobile is showing up sideways

1 Answers1