This is a migrated thread and some comments may be shown as answers.

Aspect Ratio for ImageEditor

3 Answers 54 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Alon
Top achievements
Rank 1
Veteran
Alon asked on 16 Dec 2020, 01:20 PM

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?

3 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 21 Dec 2020, 10:44 AM

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

0
Alon
Top achievements
Rank 1
Veteran
answered on 21 Dec 2020, 11:15 AM

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

0
Petar
Telerik team
answered on 23 Dec 2020, 11:50 AM

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

Tags
ImageEditor
Asked by
Alon
Top achievements
Rank 1
Veteran
Answers by
Petar
Telerik team
Alon
Top achievements
Rank 1
Veteran
Share this question
or