New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Edit images on the server

Environment

ProductTelerik WebForms ImageEditor for ASP.NET AJAX

Description

How to edit images in the ImageEditor on the server.

Solution

One way of achieving this is by adding a button that has a respective OnClick event attached to it.

Example

ASPX
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/image.jpeg" /> 

<asp:Button ID="EditImageButton" runat="server" Text="Edit Image" OnClick="EditImageButton_Click" />

Inside the EditImageButton_Click event handler, perform specific image manipulations to achieve the desired result. Additioanlly, save the edited image to a new file.

Example

C#
protected void EditImageButton_Click(object sender, EventArgs e)
{
    string originalImagePath = Server.MapPath(RadImageEditor1.ImageUrl); // Load the original image
    EditableImage editableImage = new EditableImage(originalImagePath);

    editableImage.Rotate(Rotation.Rotate180);    // Perform image manipulations
    editableImage.Flip(FlipDirection.Vertical);

    string newImagePath = Server.MapPath("~/Images/image.jpg"); // Save the edited image to a new file
    editableImage.Image.Save(newImagePath, System.Drawing.Imaging.ImageFormat.Jpeg);
    
    RadImageEditor1.ImageUrl = "~/Images/image.jpg"; // Update the ImageUrl of the RadImageEditor to display the new image

    editableImage.Dispose();  // Cleanup: Dispose of the EditableImage object
}

See Also