Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

ImageEditor / First Look

Configure RadImageEditor

File Size limit 500KB, (jpg, bmp, png, gif)
100%0x0px(-,-)None

  • Telerik RadImageEditor

    RadImageEditor is a powerful and flexible graphics editing component that allows the users to modify their images directly in the browser, without installing any third party plugins. The actions on the image are performed on the client or, through a light callback, on the server, giving you the ability 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. Here are some the key ones:

    • 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. The ToolsFile property or the Tools collection can be used to specify the desired buttons that will appear in the ToolBar.
    • 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 RadControls - We have embedded some of our ASP.NET Ajax RadControls into the ImageEditor to benefit from their rich functionality. This not only makes the new component feature rich, but a perfect example of how the RadControls work together in complex scenarios. The integrated controls are loaded on demand thus ensuring optimal loading speed and scalability.
    • Undo/Redo Actions - RadImageEditor saves all the operations, so each change performed on the image can be reverted or re-applied again. The operations stack is cleared on postbacks, because we assume the user won't initiate a postback unless she is finished with the editing.
    • Image Operations - A variety of operations can be performed on a given image. This includes rotation, resizing, changing the transparency, cropping and many more. For closer look at the specific operations please observe the different examples of the ImageEditor.


Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ImageEditor.Default.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .divList
            {
                float: left;
                width: 180px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript">
            function validationFailed(sender, eventArgs)
            {
                $telerik.$("#asyncUpload").html("Validation failed for '" + eventArgs.get_fileName() + "'.").fadeIn("slow");
            }
            function fileRemoved(sender, eventArgs)
            {
                $telerik.$("#asyncUpload").html('').fadeOut("slow");
            }
        </script>
        <telerik:RadFormDecorator runat="server" DecoratedControls="Label,RadioButtons,Buttons" />
        <telerik:RadAjaxPanel runat="server">
            <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure RadImageEditor"
                Expanded="true" Style="text-align: left;" HorizontalAlign="Right" Height="150px">
                <div class="divList">
    <asp:Label ID="Label2" Text="Choose tools file" runat="server" AssociatedControlID="RadiosTools"
    Font-Bold="true" />
                    <asp:RadioButtonList ID="RadiosTools" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosTools_SelectedIndexChanged">
                        <asp:ListItem Text="Full set of tools" Selected="True" />
                        <asp:ListItem Text="Dialogs tools" />
                        <asp:ListItem Text="Basic tools" />
                    </asp:RadioButtonList>
                </div>
                <div class="divList">
    <asp:Label ID="Label1" Text="Set StatusBarMode" runat="server" AssociatedControlID="RadiosStatusBar"
    Font-Bold="true" />
                    <asp:RadioButtonList ID="RadiosStatusBar" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosStatusBar_SelectedIndexChanged">
                        <asp:ListItem Text="Bottom" Selected="True" />
                        <asp:ListItem Text="Top" />
                        <asp:ListItem Text="Hidden" />
                    </asp:RadioButtonList>
                </div>
                <div class="divList">
    <asp:Label ID="Label3" Text="Enable/Disable resizing" runat="server" AssociatedControlID="RadiosEnableResize"
    Font-Bold="true" />
                    <asp:RadioButtonList ID="RadiosEnableResize" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadiosEnableResize_SelectedIndexChanged">
                        <asp:ListItem Text="Enable" Selected="True" />
                        <asp:ListItem Text="Disable" />
                    </asp:RadioButtonList>
                </div>
                <div class="divList" style="width: 300px">
                    <telerik:RadAsyncUpload ID="RadUpload1" runat="server" OnFileUploaded="AsyncUpload1_FileUploaded"
                        MaxFileSize="524288" OnClientValidationFailed="validationFailed" AllowedFileExtensions="jpg,png,gif,bmp"
                        AutoAddFileInputs="false" OnClientFileUploadRemoved="fileRemoved" />
                    <asp:Button ID="Button1" Text="Upload Image" runat="server" CausesValidation="False" /><br />
    <asp:Label ID="Label4" Text="File Size limit 500KB, (jpg, bmp, png, gif)" runat="server"
    Style="line-height: 30px" />
                    <br />
                    <span id="asyncUpload" style='color: Red; line-height: 15px'></span>
                </div>
            </qsf:ConfiguratorPanel>
            <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/hay.jpg"
                OnImageLoading="RadImageEditor1_ImageLoading" Width="720px" Height="430px">
            </telerik:RadImageEditor>
        </telerik:RadAjaxPanel>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451