Upload from IOS picture to .net app: Rotate

Question

I have below code for uploading and resize pictures from IOS Devices to my .net application. Users use to take picture in portrait orientation and then all pictures show up in my app with wrong rotation. Any suggestion how to fix this?

            string fileName = Server.HtmlEncode(FileUploadFormbilde.FileName);
            string extension = System.IO.Path.GetExtension(fileName);
            System.Drawing.Image image_file = System.Drawing.Image.FromStream(FileUploadFormbilde.PostedFile.InputStream);
            int image_height = image_file.Height;
            int image_width = image_file.Width;
            int max_height = 300;
            int max_width = 300;

            image_height = (image_height * max_width) / image_width;
            image_width = max_width;

            if (image_height > max_height)
            {
                image_width = (image_width * max_height) / image_height;
                image_height = max_height;
            }

            Bitmap bitmap_file = new Bitmap(image_file, image_width, image_height);
            System.IO.MemoryStream stream = new System.IO.MemoryStream();

            bitmap_file.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
            stream.Position = 0;

            byte[] data = new byte[stream.Length + 1];
            stream.Read(data, 0, data.Length);

Answer 1

Here is a better solution answer posted Here He wrote a simple helper class that does all that:

you can check the full source code here.

    private System.Drawing.Image ResizeAndDraw(System.Drawing.Image objTempImage)
        {
          // call image helper to fix the orientation issue 
            var temp = ImageHelper.RotateImageByExifOrientationData(objTempImage, true);
            Size objSize = new Size(150, 200);
            Bitmap objBmp;
            objBmp = new Bitmap(objSize.Width, objSize.Height);

            Graphics g = Graphics.FromImage(objBmp);
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.PixelOffsetMode = PixelOffsetMode.HighQuality;
            //Rectangle rect = new Rectangle(x, y, thumbSize.Width, thumbSize.Height);
            Rectangle rect = new Rectangle(0,0,150,200);
            //g.DrawImage(objTempImage, rect, 0, 0, objTempImage.Width, objTempImage.Height, GraphicsUnit.Pixel);
            g.DrawImage(objTempImage, rect);
            return objBmp;
        }


using System.Drawing;
using System.Drawing.Imaging;
using System.Linq;

public static class ImageHelper
{
    /// <summary>
    /// Rotate the given image file according to Exif Orientation data
    /// </summary>
    /// <param name="sourceFilePath">path of source file</param>
    /// <param name="targetFilePath">path of target file</param>
    /// <param name="targetFormat">target format</param>
    /// <param name="updateExifData">set it to TRUE to update image Exif data after rotation (default is TRUE)</param>
    /// <returns>The RotateFlipType value corresponding to the applied rotation. If no rotation occurred, RotateFlipType.RotateNoneFlipNone will be returned.</returns>
    public static RotateFlipType RotateImageByExifOrientationData(string sourceFilePath, string targetFilePath, ImageFormat targetFormat, bool updateExifData = true)
    {
        // Rotate the image according to EXIF data
        var bmp = new Bitmap(sourceFilePath);
        RotateFlipType fType = RotateImageByExifOrientationData(bmp, updateExifData);
        if (fType != RotateFlipType.RotateNoneFlipNone)
        {
            bmp.Save(targetFilePath, targetFormat);
        }
        return fType;
    }

    /// <summary>
    /// Rotate the given bitmap according to Exif Orientation data
    /// </summary>
    /// <param name="img">source image</param>
    /// <param name="updateExifData">set it to TRUE to update image Exif data after rotation (default is TRUE)</param>
    /// <returns>The RotateFlipType value corresponding to the applied rotation. If no rotation occurred, RotateFlipType.RotateNoneFlipNone will be returned.</returns>
    public static RotateFlipType RotateImageByExifOrientationData(Image img, bool updateExifData = true)
    {
        int orientationId = 0x0112;
        var fType = RotateFlipType.RotateNoneFlipNone;
        if (img.PropertyIdList.Contains(orientationId))
        {
            var pItem = img.GetPropertyItem(orientationId);
            fType = GetRotateFlipTypeByExifOrientationData(pItem.Value[0]);
            if (fType != RotateFlipType.RotateNoneFlipNone)
            {
                img.RotateFlip(fType);
                // Remove Exif orientation tag (if requested)
                if (updateExifData) img.RemovePropertyItem(orientationId);
            }
        }
        return fType;
    }

    /// <summary>
    /// Return the proper System.Drawing.RotateFlipType according to given orientation EXIF metadata
    /// </summary>
    /// <param name="orientation">Exif "Orientation"</param>
    /// <returns>the corresponding System.Drawing.RotateFlipType enum value</returns>
    public static RotateFlipType GetRotateFlipTypeByExifOrientationData(int orientation)
    {
        switch (orientation)
        {
            case 1:
            default:
                return RotateFlipType.RotateNoneFlipNone;
            case 2:
                return RotateFlipType.RotateNoneFlipX;
            case 3:
                return RotateFlipType.Rotate180FlipNone;
            case 4:
                return RotateFlipType.Rotate180FlipX;
            case 5:
                return RotateFlipType.Rotate90FlipX;
            case 6:
                return RotateFlipType.Rotate90FlipNone;
            case 7:
                return RotateFlipType.Rotate270FlipX;
            case 8:
                return RotateFlipType.Rotate270FlipNone;
        }
    }
}

Answer 2

Here you go my friend:

Image originalImage = Image.FromStream(data);

 if (originalImage.PropertyIdList.Contains(0x0112))
        {
            int rotationValue = originalImage.GetPropertyItem(0x0112).Value[0];
            switch (rotationValue)
            {
                case 1: // landscape, do nothing
                    break;

                case 8: // rotated 90 right
                    // de-rotate:
                    originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate270FlipNone);
                    break;

                case 3: // bottoms up
                    originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate180FlipNone);
                    break;

                case 6: // rotated 90 left
                    originalImage.RotateFlip(rotateFlipType: RotateFlipType.Rotate90FlipNone);
                    break;
            }
        }

Answer 3

You must read the image's Orientation value from the EXIF data in the Image.PropertyItems collection, and rotate it accordingly.