ImageEditor - Rotate Image

  • Save Image
  • Rotate
  • Rotate Right by 90 deg
  • Rotate Left by 90 deg
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can easily rotate your images using the RadImageEditor control. Rotations by 90 degrees are supported. The pictures can be rotated using the RadImageEditor's rotate commands, or programmatically on the client, by invoking the rotateImage(rotation) method.
The built-in commands can be rendered on the ToolBar by creating ImageEditorTool objects with Rotate, RotateLeft or RotateRight used as a CommandName. The Rotate command opens a dialog from which the image can be modified, and the other two commands rotate the image by 90 degrees to the left or right respectively.

The rotateImage client-side method accepts a parameter of type Telerik.Web.UI.ImageEditor.Rotation enumeration. The enumeration has 4 (four) values:
  • Rotation.None - the image is not rotated. If the image is currently rotated it restores the original image.
  • Rotation.Rotate90 - the image is rotated clockwise (to the right) by 90 degrees.
  • Rotation.Rotate180 - the image is rotated clockwise by the 180 degrees.
  • Rotation.Rotate270 - the image is rotated clockwise by 270 degrees.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" Inherits="Telerik.Web.Examples.ImageEditor.Rotate.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" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/10.jpg" Width="590" Height="500px">
                    <telerik:ImageEditorTool CommandName="Save" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Rotate" ToolTip="Rotate Image" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RotateRight" ToolTip="Rotate Right by 90 degrees"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RotateLeft" ToolTip="Rotate Left by 90 degrees"></telerik:ImageEditorTool>

Find Assistance

Help Us Improve

Was this example helpful?