When the ImageEditor is resized and the Toolbar wraps on 2 rows the canvas of the Component overflows its container.
<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>
The margin between the ImageEditor and the following div disappears as the ImageEditor overflows its container
The ImageEditor's should fit in its div container
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.
The Kendo UI ImageEditor's SaveAs.ProxyURL does not accept a string using Razor Syntax.
Like the jQuery configuration, the ProxyURL should accept string URLs.
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",
}
});
});