Adding a Rotating-Image Functionality to the ImageEditor

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET Core ImageEditor
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How can I add a functionality for rotating images in the Telerik UI for ASP.NET Core ImageEditor?

Solution

To achieve the desired scenario:

1. Add a custom button in the ToolBar of the ImageEditor that executes a custom command.
2. When the command is triggered, execute custom logic to rotate the image.

Razor

        .Toolbar(toolbar => toolbar.Items(i =>
        {
            i.Add().Command("RotateImageRightImageEditorCommand").Type("button").Text("Rotate Image");

        }))         

JS

    $(document).ready(function () {
        var imageEditor = $("#imageEditor").getKendoImageEditor();
        imageEditor.one("imageRendered", function () {
            imageEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditor.getZoomLevel() - 5.0 });
        });
    });


    var imageEditorNS = kendo.ui.imageeditor;
    imageEditorNS.commands.RotateImageRightImageEditorCommand = imageEditorNS.ImageEditorCommand.extend({
        exec: function () {
            var that = this,
                imageeditor = that.imageeditor,
                canvas = imageeditor.getCanvasElement(),
                ctx = imageeditor.getCurrent2dContext(),
                image = imageeditor.getCurrentImage();

            let degrees = 90; //rotate right

            canvas.width = image.height;
            canvas.height = image.width;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(image.height / 2, image.width / 2);

            ctx.rotate(degrees * Math.PI / 180);
            ctx.drawImage(image, -image.width / 2, -image.height / 2);

            imageeditor.drawImage(canvas.toDataURL()).done(function (image) {
                imageeditor.drawCanvas(image);
            }).fail(function (ev) {
                imageeditor.trigger("error", ev);
            });
        }
    });

For the complete implementation of approach suggested above, refer to the following Telerik REPL.

More ASP.NET Core ImageEditor Resources

• ASP.NET Core ImageEditor Documentation

• ASP.NET Core ImageEditor Demos

• ASP.NET Core ImageEditor Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Adding a Rotating-Image Functionality to the ImageEditor
• Client-Side API Reference of the ImageEditor for ASP.NET Core
• Server-Side API Reference of the ImageEditor for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base