Fit options

[Simon]

Hello

Love your new control. Cuts out the requirement for me to write an entire page to control the rotation, flipping, etc of an image. I would like to know if you could add a "Fit To Width", "Fit To Height" and "Fit Image" option so the image can fit to the width of the control, height of the control and then the width and height of the control.

Regards,
Simon

[Rumen]

Hi Simon,

The Fit Image button is already available in the Zoom dialog.
We will consider implementing the Fit to Width and Fit to Height commands for a future build of the control.

Best regards,
Rumen
the Telerik team

[Art Handy]

I was wondering if you could also add the options:
Best Fit, which would size the image to the height and width properties as best it can without distorting the image.
Shrink To Fit, which would distort the image to fit the smaller height and width properties.
Stretch to Fit, which would distort the image to fit the larger height and width properties.

[Rumen]

Hi Art,

Thank you for your suggestions.

I logged your requests in our PITS system. Here you can find the PITS Issue: Public URL. If more users request such features we will raise the priority of the item.


Kind regards,
Rumen
the Telerik team

[Taran]

I am also interested in these functions, are there any updates on the implementation of "Fit to Width" and "Fit to Height"?

[Vessy]

Hi Simon,

RadImageEditor still does not offer the desired functionality out-of-the-box, but you can easily achieve it by using its Client-side API. For example, you can use a similar implementation:

<asp:Button ID="button1" runat="server" OnClientClick="fitToHeight(); return false;" Text="Fit to Height" />
<asp:Button ID="button2" runat="server" OnClientClick="fitToWidth(); return false;" Text="Fit to Width" />
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Images/Jellyfish.jpg">
</telerik:RadImageEditor>
<script>
    function fitToWidth() {
        var imEditor = $find("RadImageEditor1");
        var edElement = imEditor.getEditableElement();
        var viewPort = imEditor.get_viewport();

        imEditor.zoomImage((viewPort.offsetWidth / edElement.width) * 100)
    }
    function fitToHeight() {
        var imEditor = $find("RadImageEditor1");
        var edElement = imEditor.getEditableElement();
        var viewPort = imEditor.get_viewport();

        imEditor.zoomImage((viewPort.offsetHeight / edElement.height) * 100)
    }
</script>

In case you would like to add the above funtionality as custom tools, you cans see how this can be done here: Implement Custom Dialog and Insert Image Built-in Dialog

I hope this information will be helpful for you.

Kind regards,
Vessy
Telerik