ImageEditor - 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

Change Width x Height

Change Zoom Level

Edit Image
Choose image name
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<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>
    <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" />
    <qsf:ConfiguratorPanel runat="server">
            <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: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:ConfiguratorColumn runat="server" Title="Edit Image" Size="Medium">
                    <ul class="fb-group">
                            <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" />
                            <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" />
            <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" />
    <script type="text/javascript">
            zoomListID: '<%=rbZoom.ClientID %>',
            resizeListID: '<%=rbResize.ClientID %>'

Find Assistance

Help Us Improve

Was this example helpful?