Prevent images from rotating

9 posts, 0 answers
  1. George
    George avatar
    1 posts
    Member since:
    Jul 2011

    Posted 18 Jul 2018 Link to this post

    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 correctly.
  2. Margo Noreen
    Margo Noreen avatar
    30 posts
    Member since:
    Mar 2010

    Posted 27 Mar Link to this post

    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!
  3. Peter Milchev
    Admin
    Peter Milchev avatar
    737 posts

    Posted 30 Mar Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  4. Margo Noreen
    Margo Noreen avatar
    30 posts
    Member since:
    Mar 2010

    Posted 30 Mar in reply to Peter Milchev Link to this post

    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.

     

     

     

  5. Margo Noreen
    Margo Noreen avatar
    30 posts
    Member since:
    Mar 2010

    Posted 31 Mar in reply to Peter Milchev Link to this post

    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).

     

     

  6. Peter Milchev
    Admin
    Peter Milchev avatar
    737 posts

    Posted 01 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Margo Noreen
    Margo Noreen avatar
    30 posts
    Member since:
    Mar 2010

    Posted 06 Apr in reply to Peter Milchev Link to this post

    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.

     

     

  8. Margo Noreen
    Margo Noreen avatar
    30 posts
    Member since:
    Mar 2010

    Posted 06 Apr in reply to Margo Noreen Link to this post

    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.
  9. Peter Milchev
    Admin
    Peter Milchev avatar
    737 posts

    Posted 07 Apr Link to this post

    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:

    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:

     

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top