Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
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.