EditableImage resize not reflected in browser

[Randall]

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!

--Randy


            try
            {
                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)
            {
            }

            try
            {
                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)
            {
            }

[Vessy]

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)
{
    RadImageEditor1.ImageLoading+=RadImageEditor1_ImageLoading;
}
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

Regards,
Vessy
Telerik