Rotate image with image editor

1 Answer 66 Views
ImageEditor
Plan Norge IT
Top achievements
Rank 1
Plan Norge IT asked on 09 Dec 2021, 02:35 PM
Hi - is it possible to rotate images with the image editor in ASP.NET MVC library?

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 13 Dec 2021, 03:32 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ImageEditor
Asked by
Plan Norge IT
Top achievements
Rank 1
Answers by
Yanislav
Telerik team
Share this question
or