EditableImage resize not reflected in browser

2 posts, 0 answers
  1. Randall
    Randall avatar
    1 posts
    Member since:
    Oct 2012

    Posted 19 Feb 2015 Link to this post

    Hi all,

    I'm encountering some strange behavior using RadImageEditor.

    I have code that displays two images on a page.  This in itself works fine.  However, attempting to resize the image on the server side causes the first image to not display at all, and the second image to not change its size upon display, though stepping through the code and looking at the properties indicates the Height and Width values are changed as expected.  Anyone have an explanation for this behavior?  Code included below.

    Thanks in advance for any insights!


                    RadImageEditor1.ImageUrl = PathToUrl(imagerelpath);
                    Telerik.Web.UI.ImageEditor.EditableImage ei = RadImageEditor1.GetEditableImage();
                    ei.Resize((int)(ei.Width * .5), (int)(ei.Height * .5));  // browser rendering works as expected (shown full size) without this line
                    RadImageEditor1.Height = ei.Height + 58;
                    RadImageEditor1.Width = ei.Width;
                catch (Exception ex)

                    RadImageEditor2.ImageUrl = PathToUrl(backuprelpath);
                    Telerik.Web.UI.ImageEditor.EditableImage ei2 = RadImageEditor2.GetEditableImage();
                    ei2.Resize((int)(ei2.Width * .5), (int)(ei2.Height * .5));  // browser rendering works as expected (shown full size) without this line
                    RadImageEditor2.Height = ei2.Height + 58;
                    RadImageEditor2.Width = ei2.Width;
                catch (Exception ex)
  2. Vessy
    Vessy avatar
    2067 posts

    Posted 24 Feb 2015 Link to this post

    Hi Randall,

    The problem with the provided code is that you are resizing only an instance of the RadimageEitor's EditableImage, but not the real EditableImage itself. In order to set the resized image to the ImageEditor, you will need to:
    • attach a handler to the ImageEditor's ImageLoading event;
    • create an EditableImage from the target image file;
    • resize it and replace the argument's Image object with it;
    • cancel the event arguments so the new Editable image will be used.

    For example you can have a similar implementation:

    protected void Page_Load(object sender, EventArgs e)
    protected void RadImageEditor1_ImageLoading(object sender, ImageEditorLoadingEventArgs e)
        string filename = Server.MapPath("~/Images/animal.jpg");
        MemoryStream mstream = new MemoryStream(File.ReadAllBytes(filename));
        Telerik.Web.UI.ImageEditor.EditableImage ei = new EditableImage(mstream);
        ei.Resize(200, 100);
        e.Image = ei;
        e.Cancel = true;

    You can find a live implementation of the described approach in the following live demo: ImageEditor - Save Image to a Custom Location


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top