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:
- Add a custom button in the ToolBar of the ImageEditor that executes a custom command.
- When the command is triggered, execute custom logic to rotate the image.
.Toolbar(toolbar => toolbar.Items(i =>
{
i.Add().Command("RotateImageRightImageEditorCommand").Type("button").Text("Rotate Image");
}))
$(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.