All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
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
.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); }); } });
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.