Kendo UI Jquery - Image Editor Crop Default Sepcified

[sanjay]

Hello,

when i open image on kendo editor from file upload then by default it's show selected as crop with default aspect ratio i have specified one
and also want to hide following from crop dialog -

- hide aspect ratio dropdown field
- hide orientation
- hide lock aspect ratio

only confirm and cancel button should show on crop dialog

so basic purpose it user will crop the image of required aspect ratio only no other option to be given to user.
also post crop we need to validate image size should not be more than 10MB

I am using kendo version 2024.1.130

Thanks!

[Martin]

Hello, Sanjay,

Here you will find the code to hide the elements you mentioned using the execute event:

execute:function(e){ 
              if(e.command == "OpenPaneImageEditorCommand"){
                setTimeout(function(){
                  $('span[title="aspectRatio"]').parent().closest(".k-form-field").hide()
                  $('div[name="orientation"]').parent().closest(".k-form-field").hide()
                  $('input[name="lockAspectRatio"]').parent().closest(".k-form-field").hide()
                })
              }
            }

If you need to open the Crop menu as soon as an image is rendered, a possible approach would be to force click the Crop Button in the imageRendered event:

$("button[title='Crop']").click()

Here's a small example for reference.

As for the validation, you will need to implement custom code to get the image size, for example when you click the confirm button. The component doesn't provide built-in configuration to validate the image size. 

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik