Adding a Rotating-Image Functionality to the ImageEditor

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.

CustomCommand

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

        }))         

script.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