Preview changes real time in an image control

2 posts, 0 answers
  1. Richard
    Richard avatar
    1 posts
    Member since:
    Feb 2012

    Posted 03 Sep 2012 Link to this post

    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
  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 06 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top