• Save Image
    • Export Image
    • Undo
    • Redo
    • Reset Changes
    • Crop
    • Resize
    • Zoom
      • Zoom
      • Zoom In
      • Zoom Out
    • Opacity
    • Rotate
      • Rotate
      • Rotate Right by 90 deg
      • Rotate Left by 90 deg
    • Flip
      • Flip
      • Flip Vertically
      • Flip Horizontally
    • Add Text
    • Insert Image
    • Brightness/Contrast
      • Brightness/Contrast
      • Hue/Saturation
      • Blur
      • Sharpen
      • Greyscale
      • Sepia
      • Invert Colors (negative)
    • Pencil
      • Pencil
      • Line
      • DrawRectangle
      • DrawCircle

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

    Save Image to a Custom Location

    • Print Image
    Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

    This example demonstrates how to cancel the default Saving functionality of the Image Editor and to save the edited image to a custom location. When the image is saved, the name of the created file is passed as an Argument from the Server-Side ImageSaving event, to the client-Side ClientImageSaved event. Since the ImageEditor updates itself on a CallBack, without updating the other controls on the page, this approach could be very useful when some information should be passed from the Server to the Client.

    The Image Editor's OnImageSaving event could be used to perform additional processing on the image before it is saved, like clone, resize or even cancel the saving. The Cancel property must be set to true if custom actions are performed so that the default ones are cancelled.

    Instructions

    Click over the Save command after the desired changes are made.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • scripts.js
    • styles.css
    <%@ Page Title="" Language="C#"  AutoEventWireup="true"
        CodeFile="DefaultCS.aspx.cs" Inherits="ImageEditor_Examples_CustomSaving_DefaultCS" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="../../common/styles.css" rel="stylesheet" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <link href="styles.css" rel="stylesheet" />
        <script src="scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-wide">
            <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImgEdt" runat="server" OnImageLoading="RadImgEdt_ImageLoading"
                OnImageSaving="RadImgEdt_ImageSaving" OnClientSaved="OnClientSaved" OnClientCommandExecuting="OnClientCommandExecuting"
                Width="790" Height="470">
            </telerik:RadImageEditor>
            <p id="messageLbl"></p>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance