[Solved] Rotate image with image editor

[Plan Norge IT]

Hi - is it possible to rotate images with the image editor in ASP.NET MVC library?

[Yanislav]

Hi Barry,

You should be able to implement such functionality by utilizing a custom command for the ImageEditor:

https://docs.telerik.com/kendo-ui/controls/editors/imageeditor/tools#adding-custom-commands-to-the-toolbar

Check this Canvas 2D API article for details on how to rotate a canvas element:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

Please review the following approach which demonstrates a custom command within the toolbar of the ImageEditor for an UI for ASP.NET MVC web application:

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

        }))

 And here is the JS configuration needed to implement functionality for rotating a picture to right (90 degrees)

    $(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);
            });
        }
    });

 

I hope this will help you to reach the desired functionality.  Please let me know if you have any questions regarding the above.

Regards,
Yanislav
Progress Telerik