Images are rotated in PictureBox

Question

As the question implies, when I load an image into a pictureBox (using dialog box), it doesn't appear as its original look. in this screen shoot, the image on the left is the one I loaded into the pictureBox (on the right).

Trying to know what causes this I draw an image using Paint app and rotated it using Windows Photo Viewer, the rotated image loaded as it is (rotated), that is it, some pictures are just fine loaded, and others are rotated! and I can't figure out why?!

Answer 1

When you view an image in Windows Photo Viewer, it automatically corrects image orientation if it has an Exif orientation data. PictureBox doesn't have built-in support for such functionality. You can create a custom PictureBox which shows images correctly even if they have orientation data:

using System.Linq;
using System.Windows.Forms;
using System.Drawing;
using System.ComponentModel;

public class MyPictureBox : PictureBox
{
    private void CorrectExifOrientation(Image image)
    {
        if (image == null) return;
        int orientationId = 0x0112;
        if (image.PropertyIdList.Contains(orientationId))
        {
            var orientation = (int)image.GetPropertyItem(orientationId).Value[0];
            var rotateFlip = RotateFlipType.RotateNoneFlipNone;
            switch (orientation)
            {
                case 1: rotateFlip = RotateFlipType.RotateNoneFlipNone; break;
                case 2: rotateFlip = RotateFlipType.RotateNoneFlipX; break;
                case 3: rotateFlip = RotateFlipType.Rotate180FlipNone; break;
                case 4: rotateFlip = RotateFlipType.Rotate180FlipX; break;
                case 5: rotateFlip = RotateFlipType.Rotate90FlipX; break;
                case 6: rotateFlip = RotateFlipType.Rotate90FlipNone; break;
                case 7: rotateFlip = RotateFlipType.Rotate270FlipX; break;
                case 8: rotateFlip = RotateFlipType.Rotate270FlipNone; break;
                default: rotateFlip = RotateFlipType.RotateNoneFlipNone; break;
            }
            if (rotateFlip != RotateFlipType.RotateNoneFlipNone)
            {
                image.RotateFlip(rotateFlip);
                image.RemovePropertyItem(orientationId);
            }
        }
    }
    [Localizable(true)]
    [Bindable(true)]
    public new Image Image
    {
        get { return base.Image; }
        set { base.Image = value; CorrectExifOrientation(value); }
    }
}

Answer 2

Without the original image data, it's impossible to say for sure what going on. But it's clear that at some point, some software involved in the processing of the image has used the EXIF orientation property to rotate the image, rather than actually modifying the image data itself. This may be Photo Viewer or some other tool that handled the photo at some point.

Here is code you can use to detect the orientation of the image, as recorded in the EXIF data by the camera that took the picture:

static ImageOrientation GetOrientation(this Image image)
{
    PropertyItem pi = SafeGetPropertyItem(image, 0x112);

    if (pi == null || pi.Type != 3)
    {
        return ImageOrientation.Original;
    }

    return (ImageOrientation)BitConverter.ToInt16(pi.Value, 0);
}

// A file without the desired EXIF property record will throw ArgumentException.
static PropertyItem SafeGetPropertyItem(Image image, int propid)
{
    try
    {
        return image.GetPropertyItem(propid);
    }
    catch (ArgumentException)
    {
        return null;
    }
}

where:

/// <summary>
/// Possible EXIF orientation values describing clockwise
/// rotation of the captured image due to camera orientation.
/// </summary>
/// <remarks>Reverse/undo these transformations to display an image correctly</remarks>
public enum ImageOrientation
{
    /// <summary>
    /// Image is correctly oriented
    /// </summary>
    Original = 1,
    /// <summary>
    /// Image has been mirrored horizontally
    /// </summary>
    MirrorOriginal = 2,
    /// <summary>
    /// Image has been rotated 180 degrees
    /// </summary>
    Half = 3,
    /// <summary>
    /// Image has been mirrored horizontally and rotated 180 degrees
    /// </summary>
    MirrorHalf = 4,
    /// <summary>
    /// Image has been mirrored horizontally and rotated 270 degrees clockwise
    /// </summary>
    MirrorThreeQuarter = 5,
    /// <summary>
    /// Image has been rotated 270 degrees clockwise
    /// </summary>
    ThreeQuarter = 6,
    /// <summary>
    /// Image has been mirrored horizontally and rotated 90 degrees clockwise.
    /// </summary>
    MirrorOneQuarter = 7,
    /// <summary>
    /// Image has been rotated 90 degrees clockwise.
    /// </summary>
    OneQuarter = 8
}

The GetOrientation() method above is written as an extension method, but of course you can call it as a plain static method. Either way, just pass it the Bitmap object you've just opened from a file, and it will return the EXIF orientation stored in the file, if any.

With that in hand, you can rotate the image according to your needs.