Flip/Rotate

5 posts, 0 answers
  1. Marcin
    Marcin avatar
    195 posts
    Member since:
    Jan 2011

    Posted 09 Dec 2020 Link to this post

    Is it possible to create such action with custom actions?
  2. Aleksandar
    Admin
    Aleksandar avatar
    264 posts

    Posted 11 Dec 2020 Link to this post

    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

    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/.

  3. Aleksandar
    Admin
    Aleksandar avatar
    264 posts

    Posted 11 Dec 2020 Link to this post

    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/.

  4. Alon
    Alon avatar
    25 posts
    Member since:
    Aug 2015

    Posted 19 Dec 2020 Link to this post

    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);
        });
      }
    });
  5. Stoyan
    Admin
    Stoyan avatar
    29 posts

    Posted 23 Dec 2020 Link to this post

    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/.

Back to Top