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

[Mark]

I second the request for the image editor to be able to enable/disable display of any or all of each panes contents (such as the cropping tool) and allow via configuration presets on any requirements such as fixed cropping orientation, 1-N fixed aspect ratios, etc.

Honestly, I kind of expected this sort of functionality to exist out-of-the-box without having to resort to using jQuery to manipulate the DOM and force message events as you've described.

-Mark

[Alon]

Agreed. I was hoping that the latest release of Kendo UI for JQuery will have addressed this but I havent had a chance to check it out. Have you checked?

[Mark]

Today I used their "Dojo" online tool with the latest release and it still behaves as before... so no additional functionality.

Really, what I'm in need of is this:

• Allow image to either be:
  • uploaded on the fly (saving the original full sized image file into a known location on the server/cloud)
  • prefilled by providing a source url
  • prefilled by providing the data as a string blob

• Use the image editor as a "bounding-box" crop selection mechanism with:

  • pre-set aspect ratios

  • pre-set orientation

• Send the values of the bounding box (ie: the calculated x,y origin and x,y bound sets of the crop dimensions in relation to the original full-size uploaded/saved image) to the server so that 1-N variations of those crop specifications can be applied (server side) to the full size image --> to clone, crop and finally resize any pixel perfect sized image (applying the established aspect ratio crop the full image to the required size (height or width) of the new rendered image).

I know, its a lot to want... would settle for Telerik to just offered a separate crop-assistant tool that calculated these x,y positional coordinates necessary to perform the crop away from and independent of the Image Editor :)

Mark

[Alon]

We both have similar requirements. I wonder if there is somewhere where we can submit feature requests and vote on it? Do you know if Kendo offers something like that? Maybe Petar can chime in on this....

[Mark]

Perhaps that is an excellent idea.

I'm suspecting that ultimately your reason for this is the same as mine... I need to keep the original image archived on the server as to not having any image degradation or loose resolution/clarity (avoiding any pixelization) of newly rendered images... provided the new image is equal or smaller that the original.  Hence, I always require a maximum size high resolution original to base any cropped images off of.

In usage, I would expect the ImageEditor to allow me to supply it via a url with a shrunken version of a previously uploaded image (i.e.: I would simply resize the image to a much more manageable physical file-size  like megabytes instead of gigabytes... akin to producing a thumbnail, but larger) where the editor could use this supplied image to work on the crop dimensions.  This is obviously needed to be able to have the ImageEditor be performant and not have to deal with gigantic peta-pixel sized images.

Mark

[Martin]

Hello, 

I just wanted to let you know that any suggestions for feature requests can be submitted in our Feedback Portal where people can vote for it. Kindly explain what is missing in the ImageEditor and we will monitor the interest towards it.