Aspect Ratio for ImageEditor

[Alon]

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?

[Petar]

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

[Alon]

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

[Petar]

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