Preview changes real time in an image control

[Richard]

Hi,

I'm looking into the radImageEditor control to see if it's possible to be used to edit an image and display the changes live in a simple asp image control.

For example, I would like to allow the user to crop/resize/rotate an uploaded image, and display the changes in real time in a separate control.

I'm looking for something similar to this jQuery plugin http://www.odyniec.net/projects/imgareaselect/. It is preferable to use the Telerik control due to the extra image editing functionality available.

Thanks for any help in advance!

Rich

[Vessy]

Hi Richard,

In order to achieve the desired functionality you could use the EditableImage class of the RadImageEditor. If you attach a handler to the OnImageChanged server event, you could access the currently changed image in a similar way:

ASPX:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="sample-image.jpg"
    OnImageChanged="ImageEditor1_ImageChanged">
</telerik:RadImageEditor>

CS:

public void ImageEditor1_ImageChanged(object sender, ImageEditorEventArgs args)
{
    EditableImage editedImage = args.Image;

    using (MemoryStream stream = new MemoryStream())
    {
        editedImage.Image.Save(stream, editedImage.RawFormat);
        byte[] imgData = stream.ToArray();
    }
}

Kind regards,
Veselina
the Telerik team