Bug report

When the ImageEditor is resized and the Toolbar wraps on 2 rows the canvas of the Component overflows its container.

Reproduction of the problem

1. Add the following code to a Telerik UI for ASP .NET Core project:

<div class="demo-section k-content">
    @(Html.Kendo().ImageEditor()
        .Name("imageEditor")
        .Height(900)
        .SaveAs(s => s.FileName("image_edited.png"))
        .ImageUrl(@Url.Content("~/images/latest-available version.png"))
        .Events(e=>e.ImageRendered("rendered").Execute("executed"))
    )
</div>
<div class="mt-5 card">  <div class="card-body">48px margin above</div></div>

2. Resize the window until the Toolbar of the ImageEditor wraps on 2 rows.

Current behavior

The margin between the ImageEditor and the following div disappears as the ImageEditor overflows its container

Expected/desired behavior

The ImageEditor's should fit in its div container

Environment

• Kendo UI version: 2021.2.511
• **Telerik UI for ASP .NET Core
• Browser: [all]

C# / .NET 5 / Telerik.UI.for.AspNet.Core (V2021.2.511)

Dear Telerik,

After opening a JPG file in the Kendo ImageEditor and selecting Save, the image is saved to a .jpg file but in the PNG format instead of the JPG format. This is quite annoying especially because of the increase in file size. For example, a 1MB JPG file is saved to a 6MB PNG file.

Question: How do I request the Kendo ImageEditor to save an image in the same format as the original ?

<div class="k-content">
  @(Html.Kendo ().ImageEditor ()
    .Name ("ImageEditor")
    .HtmlAttributes (new { @class = "w-100" })
    .Height (720)
    .SaveAs (PoSaveAs => PoSaveAs.FileName ("Image.jpg"))
    .Toolbar (PoToolbar => PoToolbar.Items (PoItem =>
    {
      PoItem.Add ().Name ("open") ;
      PoItem.Add ().Name ("save") ;

      PoItem.Add ().Name ("undo") ;
      PoItem.Add ().Name ("redo") ;
      PoItem.Add ().Name ("resize") ;
      PoItem.Add ().Name ("crop") ;
      PoItem.Add ().Name ("zoomIn") ;
      PoItem.Add ().Name ("zoomOut") ;
      PoItem.Add ().Name ("zoomDropdown") ;
    })))
</div>
 

Thanks for your help.

<div class="k-content">
  @(Html.Kendo ().ImageEditor ().Name ("ImageEditor").SaveAs (i => i.FileName ("Image.jpg")))
</div>

Steps to reproduce:

1. Open a JPEG file in ImageEditor.
2. Save the image.

Current behavior:

The image is saved to Image.jpg but the format of the image is the PNG format.

Expected behavior:

The image should be saved in the format of the loaded image. In the example above, the image should have been saved in the JPEG format instead of the PNG format.

This is very annoying especially because of the increase in file size. For example, a 1 MB JPG file is saved to a 6 MB PNG file.

C# / .NET 5 / Telerik.UI.for.AspNet.Core (V2021.2.511)

Steps to reproduce:

Open the ASP.NET Core ImageEditor Demo at https://demos.telerik.com/aspnet-core/imageeditor

1. Load a Portrait image (Width < Height)
2. Select the Crop tool
3. Click on Landscape
4. Select any aspect ratio, for example 16:9
5: Select "Original ratio" back again

Current Behavior:

The browser takes some time to respond and sometimes crashes. And each time, we get a stack overflow logged in the browser's Dev Tools - See picture below.

Please correct, it's starting to get a little annoying. The ImageEditor is quite buggy and not usable as is in production. Thanks for your comprehension.

Steps to reproduce:

1. Open an image
2. Select the crop tool.
3. Resize the crop to a smaller area.
4. Move the crop area to the top middle of the image for example.
5. Resize the crop to a larger area using the bottom right handle.

Current behavior:

The crop area overflows the image if it is made large enough.

The problem is also reproducible on Telerik Demos at https://demos.telerik.com/aspnet-core/imageeditor

C# / .NET 5 / Telerik.UI.for.AspNet.Core (V2021.2.511)

Bug report

When the crop tool is active and the crop isn't confirmed/canceled upon importing of new image the cropped image persists and overlays the imported image

Reproduction of the problem

1. Open the ImageEditor Demo
2. Click the Crop tool
3. Import a new image without confirming or cancelling the crop

Current behavior

The cropped image persists when the crop hasn't finished and a new image is imported.

Expected/desired behavior

The cropped image should be cleared from view.

Environment

• Kendo UI version: 2021.2.511
• Browser: [all]

Bug report

The Kendo UI ImageEditor's SaveAs.ProxyURL does not accept a string using Razor Syntax.

Current behavior

Expected/desired behavior

Like the jQuery configuration, the ProxyURL should accept string URLs.

Workaround

Utilizing the Kendo UI ImageEditor's setOptions method, configure the proxyURL with jQuery:

   $(function () {
        var imageEditor = $("#imageEditor").data("kendoImageEditor");

        imageEditor.setOptions({
            saveAs: {
                fileName: "ImageEditorFile.png",
                forceProxy: true,
                proxyURL: "Home/SaveProxyURL",
            }
        });
    });

Environment

• Kendo UI version: 2020.3.915
• Browser: All