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

WebForms ImageEditor Overview

  • 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
  • Choose Image
  • Settings
  • File Size limit 500KB, (jpg, bmp, png, gif)

Choose tools file
Set StatusBarMode
Enable/Disable resizing

About RadImageEditor for ASP.NET AJAX

RadImageEditor is powerful and flexible graphics editing component that enables the users to modify their images directly in the browser, without the need of installing any third party plugins. The actions on the image are performed on the client or, through a light callback, on the server, giving the possibility to perform the editing quickly and see the changes on the fly. The control is fully customizable, intuitive to work with and provides many features.

RadImageEditor and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich Client-side functionality - RadImageEditor exposes many of the methods used to perform the operations on the image, so that the image can be easily modified programmatically.
  • Customizable Tools - The developer has full control over the ImageEditor's set of tools
  • Intuitive Dialogs - RadImageEditor provides a set of built-in dialog controls that are easy to use and offer the user a quick and intuitive way of modifying the images in the desired fashion
  • Integrated Telerik controls - We have embedded some of our ASP.NET Ajax controls into the ImageEditor to benefit from their rich functionality.
  • Undo/Redo Actions - RadImageEditor saves all the operations, so each change performed on the image can be reverted or re-applied again
  • Image Operations - A variety of operations can be performed on a given image
  • Zoom functionality - ability to zoom the edited image with the Zoom toolbar options as well as with the Alt + mouse wheel combination

More about RadImageEditor for ASP.NET AJAX

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • Basic.xml
    • Basic.xml
    • Canvas.xml
    • Dialogs.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ImageEditor.Overview.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/jscript"></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:RadAjaxPanel runat="server">
            <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg"
                                    OnImageLoading="RadImageEditor1_ImageLoading" Width="790px" Height="430px">
            </telerik:RadImageEditor>
        </telerik:RadAjaxPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View Title="Choose Image" runat="server">
                <ul class="fb-group">
                    <li>
                        <telerik:RadAsyncUpload RenderMode="Lightweight" ID="RadUpload1" runat="server" OnFileUploaded="AsyncUpload1_FileUploaded"
                                                MaxFileSize="524288" OnClientValidationFailed="validationFailed" AllowedFileExtensions="jpg,png,gif,bmp"
                                                AutoAddFileInputs="false" OnClientFileUploadRemoved="fileRemoved" Skin="Silk">
                        </telerik:RadAsyncUpload>
                        <asp:Label ID="Label4" Text="File Size limit 500KB, (jpg, bmp, png, gif)" runat="server" />
                    </li>
                    <li>
                        <qsf:Button ID="Button1" Text="Upload Image" runat="server" CausesValidation="False"></qsf:Button><br />
                        <span id="asyncUpload" style='color: Red; line-height: 15px'></span>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Settings">
                <qsf:ConfiguratorColumn runat="server" Title="Choose tools file" Size="Narrow">
                    <asp:Label ID="Label2" runat="server" AssociatedControlID="RadiosTools"
                               Font-Bold="true"></asp:Label>
                    <asp:RadioButtonList ID="RadiosTools" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosTools_SelectedIndexChanged">
                        <asp:ListItem Text="Default set of tools" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Dialogs tools"></asp:ListItem>
                        <asp:ListItem Text="Basic tools"></asp:ListItem>
                        <asp:ListItem Text="Canvas tools"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Set StatusBarMode" Size="Narrow">
                    <asp:Label ID="Label1" runat="server" AssociatedControlID="RadiosStatusBar"
                               Font-Bold="true"></asp:Label>
                    <asp:RadioButtonList ID="RadiosStatusBar" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosStatusBar_SelectedIndexChanged">
                        <asp:ListItem Text="Bottom" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Top"></asp:ListItem>
                        <asp:ListItem Text="Hidden"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Enable/Disable resizing" Size="Medium">
                    <div class="divList">
                        <asp:Label ID="Label3" runat="server" AssociatedControlID="RadiosEnableResize"
                                   Font-Bold="true"></asp:Label>
                        <asp:RadioButtonList ID="RadiosEnableResize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosEnableResize_SelectedIndexChanged">
                            <asp:ListItem Text="Enable" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Disable"></asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance