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

Rotate Image

  • Save Image
  • Rotate
  • Rotate Right by 90 deg
  • Rotate Left by 90 deg
Zoom:100%Size:0x0pxPos.:(-,-)Last Action:None

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>
<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" />
</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-medium">
        <telerik:RadImageEditor RenderMode="Lightweight" ID="RadImageEditor1" runat="server" ImageUrl="~/ImageEditor/images/10.jpg" Width="590" Height="500px">
            <Tools>
                <telerik:ImageEditorToolGroup>
                    <telerik:ImageEditorTool CommandName="Save" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="Rotate" ToolTip="Rotate Image" IsToggleButton="true"></telerik:ImageEditorTool>
                    <telerik:ImageEditorToolSeparator></telerik:ImageEditorToolSeparator>
                    <telerik:ImageEditorTool CommandName="RotateRight" ToolTip="Rotate Right by 90 degrees"></telerik:ImageEditorTool>
                    <telerik:ImageEditorTool CommandName="RotateLeft" ToolTip="Rotate Left by 90 degrees"></telerik:ImageEditorTool>
                </telerik:ImageEditorToolGroup>
            </Tools>
        </telerik:RadImageEditor>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance