4 Answers, 1 is accepted
Hi Marcin,
You should be able to implement such functionality. You can follow the guideline on implementing a custom command for the ImageEditor:
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
I hope this helps.
Regards,
Aleksandar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Marcin,
For flipping/mirroring images you can review this SO thread as well:
https://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5
Regards,
Aleksandar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
In case anyone needs it here is my addition of rotateRight command
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); }); }});
Hi, Alon,
thank you for your contribution.
If anyone needs to add a rotation tool to Kendo ImageEditor they should definitely give your take a try.
It is great to see that you are active as a part of our community and are willing to share your coding experience with our products.
Regards,
Stoyan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi Stoyan,
I'm trying to get this example to work with mvc core but it's not working. I can't get the option to show up. Can you assist?
<kendo-imageeditor name="imageEditor" height="550" image-url="data:image/jpeg;base64,@System.Convert.ToBase64String(Model.SignatureImage)">
<save-as force-proxy="true" proxy-url="Add" proxy-target="_self" file-name="@Model.SelectedUserId" />
<toolbar enabled="true"> <items>
<item options="image" type="button" text="Rotate" icon="rotate" enable="true" hidden="false" command="RotateImageRightImageEditorCommand"></item>
</items>
</toolbar>
</kendo-imageeditor>
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);
});
}
});
Thanks,
Stan
I have investigated the code snippets and I have noticed that the TagHelper implementation is used. Currently, it is a flaw on our side that a custom button cannot be added to the toolbar. As a temporary workaround until the fix is live, I would recommend to switch over to the HtmlHelper implementation instead: