Aspect Ratio for ImageEditor

4 posts, 0 answers
  1. Alon
    Alon avatar
    25 posts
    Member since:
    Aug 2015

    Posted 16 Dec 2020 Link to this post

    Hi,

    We would like to force the user to crop the image in a 4:3 aspect ratio only.

     

    this._kendoImageEditor = $("#kendoImageEditorComponent").kendoImageEditor({
        imageUrl: options.image,
        toolbar:{
            items:
            [
            "zoomIn",
            "zoomOut",
            "crop"
            ]
        },
        messages: {
            panes: {
                crop: {
                    aspectRatioItems: {
                        "4:3": "4:3"
                    }
                }
            }
        }
    }).data("kendoImageEditor");

     

    However when testing we see all the other aspect ratios. 

     

    Can these be removed?

  2. Petar
    Admin
    Petar avatar
    472 posts

    Posted 21 Dec 2020 Link to this post

    Hi Alon,

    Based on the communication in the support ticket you've submitted about the same issue, I can see that you've managed to implement the targeted functionality in the application you are working on. 

    Just in case we can help someone else who wants to have the same behavior as yours, I will share the definition of the ImageEditor by which the targeted functionality can be implemented:

    $("#imageEditor").kendoImageEditor({
        imageUrl: "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png",
        width: "100%",
        height: 900,
        saveAs: {
          fileName: "image_edited.png"
        },
        messages: {
          panes: {
            crop: {
              aspectRatioItems: {
                "4:3": "4:3"
              }
            }
          }
        }
      });

    The code in yellow will define only one aspect ratio option in the "Crop" pane of the ImageEditor. 

    Regards,
    Petar
    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. Alon
    Alon avatar
    25 posts
    Member since:
    Aug 2015

    Posted 21 Dec 2020 in reply to Petar Link to this post

    Hi Peter,

    The reason that I logged the defect is because that the behavior you describe is not what I am seeing. The aspect ratio is appended to the existing list of aspect ratios rather then replace the existing ones. 

    So perhaps this is a bug in the new imageEditor?

    Alon

  4. Petar
    Admin
    Petar avatar
    472 posts

    Posted 23 Dec 2020 Link to this post

    Hi Alon,

    You are correct in the context that the code I've shared only adds the "4:3" ratio to the widget and doesn't remove the other built-in ratios. With the current implementation of the ImageEditor, the approach that can be used to remove the ratios that are not needed in the crop pane is to manipulate the DOM with jQuery when the execute event is triggered. 

    Taking about if the discussed behavior is a bug or not, I can share that it is not a bug but I can agree that we can consider changing the widget's implementation in a way the ratio types can be predefined without DOM manipulations. I will share your feedback with the team and maybe we can implement this feature in the future. 

    Regards,
    Petar
    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