this._kendoImageEditor = $("#kendoImageEditorComponent").kendoImageEditor({
imageUrl: options.image,
toolbar:{
items:
[
{
type: "button",
text: "Rotate",
icon: "rotate",
enable: true,
command:"RotateImageRightImageEditorCommand"
},
"undo",
"redo",
]
}
}).data("kendoImageEditor");
var imageEditorNS = kendo.ui.imageeditor;
imageEditorNS.commands.RotateImageRightImageEditorCommand = imageEditorNS.ImageEditorCommand.extend({
exec: function () {
var that = this,
options = that.options,
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);
});
}
});