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

Client-side API

  • Print Image
  • 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
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
  • Demo Configurator
  • Edit Image
  • Download Image
Change Width x Height
Change Zoom Level
Edit Image
Choose image name

RadImageEditor exposes many methods and properties on the client, giving you the ability to perform any action on the image programmatically. You could easily change the transparency, decrease the dimensions and save the changes of the image by calling the correct method.

For example if you want to mirror your image horizontally, you should use the RadImageEditor's flipImage(flipDirection) method by passing Telerik.Web.UI.ImageEditor.FlipDirection.Horizontal enumeration value.
Now, if you want to download the image on your client machine, you should call the saveImageOnClient(fileName) method and specify the file name you want to use. Any changes that are made on the image will be applied on the server, and the browser will popup for download.

The full list of client-side methods and properties can be found on our online documentation. Check-out the "Related Resources" section for links.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ImageEditor.ClientSideAPI.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" />
    <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="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/logo.png" Height="410px" Width="790px" OnClientLoad="imageEditor_load" />
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View Title="Edit Image" runat="server">
                <qsf:ConfiguratorColumn runat="server" Title="Change Width x Height" Size="Narrow">
                    <qsf:RadioButtonList ID="rbResize" runat="server" AutoPostBack="false" onclick="Resize();">
                        <asp:ListItem Text="500 x 236px" Value="500,236" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="500 x 500px" Value="500,500"></asp:ListItem>
                        <asp:ListItem Text="640 x 480px" Value="640,480"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Change Zoom Level" Size="Narrow">
                    <qsf:RadioButtonList ID="rbZoom" runat="server" AutoPostBack="false" onclick="Zoom();">
                        <asp:ListItem Text="50%"></asp:ListItem>
                        <asp:ListItem Text="100%" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="200%"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn runat="server" Title="Edit Image" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="flipVerticalBtn" Text="Flip Vertically" OnClientClicked="FlipVertical" AutoPostBack="false" runat="server" />
                            <qsf:Button ID="flipHorizontalBtn" Text="Flip Horizontally" OnClientClicked="FlipHorizontally" AutoPostBack="false" runat="server" />
                        </li>
                        <li>
                            <qsf:Button ID="rotateLeftBtn" Text="Rotate Left" OnClientClicked="RotateLeft" AutoPostBack="false" runat="server" />
                            <qsf:Button ID="rotateRightBtn" Text="Rotate Right" OnClientClicked="RotateRight" AutoPostBack="false" runat="server" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Download Image" runat="server">
                <qsf:ConfiguratorColumn Title="Choose image name" runat="server">
                    <qsf:TextBox id="downloadBox" ClientEvents-OnLoad="downloadBox_load" runat="server" />
                    <qsf:Button ID="downloadBtn" Text="Download Image" OnClientClicked="DownLoadImage" AutoPostBack="false" runat="server" />
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            zoomListID: '<%=rbZoom.ClientID %>',
            resizeListID: '<%=rbResize.ClientID %>'
        });
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance