This is a migrated thread and some comments may be shown as answers.

EditableImage resize not reflected in browser

1 Answer 51 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Randall
Top achievements
Rank 1
Randall asked on 19 Feb 2015, 04:26 PM
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)
            {
            }

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 24 Feb 2015, 02:57 PM
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
 

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.

 
Tags
ImageEditor
Asked by
Randall
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or