New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Edit images on the server


Product Telerik WebForms ImageEditor for ASP.NET AJAX


How to edit images in the ImageEditor on the server.


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


<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.


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

    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
Protected Sub EditImageButton_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim originalImagePath As String = Server.MapPath(RadImageEditor1.ImageUrl)
    Dim editableImage As EditableImage = New EditableImage(originalImagePath)


    Dim newImagePath As String = Server.MapPath("~/Images/image.jpg")
    editableImage.Image.Save(newImagePath, System.Drawing.Imaging.ImageFormat.Jpeg)

    RadImageEditor1.ImageUrl = "~/Images/image.jpg"

End Sub

See Also

In this article