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 / Client-side API

100%0x0px(-,-)None




  • Client-Side API

    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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="true" %>

    <%@ 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">
            div.divItem
            {
                width: 160px;
                height: 100px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableScriptCombine="false" />
        <script type="text/javascript">
            //<![CDATA[
            var imEditor = null;
            function GetEditor()
            {
                if (!imEditor) imEditor = $find("<%= RadImageEditor1.ClientID %>");
                return imEditor;
            }
            function DownLoadImage()
            {
                var fName = $get("txtFName").value;
                if (!fName) fName = "Telerik_Logo";
                GetEditor().saveImageOnClient(fName);
            }
            function Zoom()
            {
                var $ = $telerik.$;
                //get the selected radio
                var zoom = $('input[type=radio]:checked', '#<%= rbZoom.ClientID %>').val();
                GetEditor().zoomImage(parseInt(zoom));
            }
            function Resize()
            {
                var $ = $telerik.$;
                //get the value of the selected radio and split its string
                var dims = $('input[type=radio]:checked', '#<%= rbResize.ClientID %>').attr("value").split(",");
                var width = parseInt(dims[0]);
                var height = parseInt(dims[1]);
                GetEditor().resizeImage(width, height);
            }
            function FlipVertical()
            {
                GetEditor().flipVertical();
            }
            function FlipHorizontally()
            {
                GetEditor().flipHorizontal();
            }
            function RotateLeft()
            {
                GetEditor().rotateLeft90();
            }
            function RotateRight()
            {
                GetEditor().rotateRight90();
            }
            //]]>
        </script>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <table style="margin-top: 20px;">
            <tr>
                <td style="vertical-align: top; padding-right: 30px;">
                    <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/logo.png"
                        Height="410px" Width="700px">
                    </telerik:RadImageEditor>
                </td>
                <td>
                    <div id="controls">
                        <div class="divItem">
                            <label for="rbResize" style="font-weight: bold;">
                                Change Width x Height:</label>
                            <asp:RadioButtonList ID="rbResize" runat="server" AutoPostBack="false" onclick="Resize();">
                                <asp:ListItem Text="500 x 236px" Value="500,236" Selected="True" />
                                <asp:ListItem Text="500 x 500px" Value="500,500" />
                                <asp:ListItem Text="640 x 480px" Value="640,480" />
                            </asp:RadioButtonList>
                        </div>
                        <div class="divItem">
                            <label for="rbZoom" style="font-weight: bold;">
                                Change Zoom Level:</label>
                            <asp:RadioButtonList ID="rbZoom" runat="server" AutoPostBack="false" onclick="Zoom();">
                                <asp:ListItem Text="50%" />
                                <asp:ListItem Text="100%" Selected="True" />
                                <asp:ListItem Text="200%" />
                            </asp:RadioButtonList>
                        </div>
                        <div class="divItem" style="height: 80px;">
                            <label style="font-weight: bold;">
                                Flip Image:</label>
                            <input type="button" value="Flip Vertically" title="Flip the image vertically" onclick="FlipVertical(); return false;"
                                style="width: 100px" />
                            <br />
                            <input type="button" value="Flip Horizontally" title="Flip the image horizontally"
                                onclick="FlipHorizontally(); return false;" style="width: 100px" />
                        </div>
                        <div class="divItem" style="height: 80px;">
                            <label style="font-weight: bold;">
                                Rotate Image:</label>
                            <input type="button" value="Rotate Right" title="Rotate the image to the right by 90 degrees"
                                onclick="RotateRight(); return false;" style="width: 100px" />
                            <br />
                            <input type="button" value="Rotate Left" title="Rotate the image to the left by 90 degrees"
                                onclick="RotateLeft(); return false;" style="width: 100px" />
                        </div>
                        <div class="divItem">
                            <label for="txtFName" style="font-weight: bold;">
                                File Name:
                            </label>
                            <input type="text" id="txtFName" />
                            <br />
                            <input type="button" value="Download Image" title="Applies to the image, and initiates download on the client!"
                                onclick="DownLoadImage(); return false;" />
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <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