Prevent images from rotating

[George]

I am using the IMage gallery successfully except for a few images which are higher than they are wide, and when rendered in the control, it rotates them sideways. I want to prevent this without modifying the image. How can I get the control to display the image

[Margo Noreen]

Did you ever get this resolved?  We are experience the same problem... the RadImageGallery control is rotating images and DO NOT want that to happen!

[Peter Milchev]

Hello Margo,

We tried to recreate the scenario but we were unable to replicate the issue as demonstrated in this screencast: https://screencast-o-matic.com/watch/cFiqjtFE72. 

Would you please modify the attached project so that it replicates the issue and send it back to us as in attachment to an official support ticket? This would allow us to investigate locally and help you more efficiently.

Regards,
Peter Milchev
Progress Telerik

[Margo Noreen]

One thing that I would note right away... the code I am using loads up the image gallery with a list of images that have been loaded up into memory using byte array, not static files.  The reason is that the list of images to display are read from a directory that our IIS account does not have access to for a variety of reasons.

So imagine, we have a web page with a button/link to display an individual file.  That code does uses Response.TransmitFile(filename) to display a single file/image.  It displays normally.

 

Now we have a button to display the same image in the image gallery control, but uses the technique described... set the DataSource of the control to array of bytes.  Now the image is flipped or rotated, not really sure the rhyme or reason to how it gets displayed.

 

 

 

[Margo Noreen]

The other thing I can tell you in my testing:  So I've set the DataSource of my image gallery control to an list of an array bytes.  I can now see an image that in the image gallery that is rotated.  I can right click that image being displayed.  In Chrome, that right-click option is "Open image in new tab" and in Firefox that right-click option is View Image.  When I choose one of those options, the browser renders the image to a new window/tab and it's displayed correctly (that is, *not* rotated).

 

 

[Peter Milchev]

Hello Margo,

I am afraid that I am still unable to replicate the rotated image on my side. 

<telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1"  OnNeedDataSource="RadImageGallery1_NeedDataSource" >
        </telerik:RadImageGallery>

protected void RadImageGallery1_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e)
{
    var imageList = new List<byte[]>();
    var imgs = Directory.EnumerateFiles(Server.MapPath("~/Images"));
    foreach (var item in imgs)
    {
        byte[] byteArray = File.ReadAllBytes(item);
        imageList.Add(byteArray);

    }

    (sender as RadImageGallery).DataSource = imageList;
}

Would you please modify the attached project so that it replicates the issue and send it back to us(as an attachment to an official support ticket) for further investigation? You can use the images from the project or any other dummy images. 

Once we are able to observe the issue locally, we will be able to provide more specific suggestions.

Regards,
Peter Milchev
Progress Telerik

[Margo Noreen]

I downloaded your solution.   I did not change any code, just substituted a couple of files in your Images directory.  They are not displayed correctly (as compared to viewing them directly in a browser window or just opening them directly from my Windows 10 desktop, using the default photo application).  One is displayed upside down, the other is rotated.  This is also what happens in our own website use of the image gallery control.

 

 

[Margo Noreen]

The other image file is larger than 2mb and I am unable to "attach" it to this post.  The one I attached is displaying rotated, though.  If you'd like the other, please advise as to how to get that to you that doesn't have the file size limitation.  Thx.

[Peter Milchev]

Hello Margo Noreen,

Thank you for the image, I was able to replicate the rotation issue for the thumbnail image with it. 

It is actually an issue of the RadBinaryImage and is replicated with the following simple code when the ResizeMode is different from None:

protected void Page_Load(object sender, EventArgs e)
{
    var binary = new RadBinaryImage();
    binary.ID = "BinaryImage1";
    binary.ResizeMode = BinaryImageResizeMode.Crop;

    binary.Width = Unit.Pixel(100);
    binary.Height = Unit.Pixel(100);
    // the faulty image is the only image in the Images folder
    var path = Directory.EnumerateFiles(Server.MapPath("~/Images")).First();
        
    //binary.DataValue = ImagePathToByteArray(path);
    binary.DataValue = File.ReadAllBytes(path);
    Form.Controls.Add(binary);
}

 

I have also logged this issue in our feedback portal where you can subscribe for it to get notified when there is any progress on it:

• https://feedback.telerik.com/aspnet-ajax/1460927-radbinaryimage-rotates-some-images-when-fixed-size-is-set-and-resizemode-different-from-none

This seems to be a known issue with some images and their EXIF information regarding the rotation. Detailed information on this matter and a solution could be found in the following forum thread:

• http://stackoverflow.com/questions/6222053/problem-reading-jpeg-metadata-orientation

 

The Solution for the Binary image would be as follows: 

protected void Page_Load(object sender, EventArgs e)
{
    var binary = new RadBinaryImage();
    binary.ID = "BinaryImage1";
    binary.ResizeMode = BinaryImageResizeMode.Crop;

    binary.Width = Unit.Pixel(100);
    binary.Height = Unit.Pixel(100);

    var path = Directory.EnumerateFiles(Server.MapPath("~/Images")).First();
        
    binary.DataValue = ImagePathToByteArray(path);
    //binary.DataValue = File.ReadAllBytes(path);
    Form.Controls.Add(binary);
}

public byte[] ImagePathToByteArray(string path)
{
    System.Drawing.Image img = Bitmap.FromFile(path);
    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);
    }

    return ImageToByte(img);
}

public static byte[] ImageToByte(System.Drawing.Image img)
{
    System.Drawing.ImageConverter converter = new System.Drawing.ImageConverter();
    return (byte[])converter.ConvertTo(img, typeof(byte[]));
}

 

With that said, please try using the ImagePathToByteArray() method from the last code snippet instead of File.ReadAllBytes().

Also, as a small token of gratitude for helping us replicate the issue, we have updated your Telerik points.

Regards,
Peter Milchev
Progress Telerik