Flip/Rotate

[Marcin]

Is it possible to create such action with custom actions?

[Aleksandar]

Hi Marcin,

You should be able to implement such functionality. You can follow the guideline on implementing 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

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Aleksandar]

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

[Alon]

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);
    });
  }
});

[Stoyan]

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

[Chevron Phillips Chemical Co]

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

[Tsvetomir]

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:

https://demos.telerik.com/aspnet-core/imageeditor