Telerik Forums
UI for ASP.NET MVC Forum
1 answer
125 views

I am using the Image Browser  https://demos.telerik.com/aspnet-mvc/editor/imagebrowser on my Razor pages.

How do I add a feature to auto check for the Image resolution and size down to below 650 or 650px in here?

I have a preview container where the max-width I am allowed to see the preview is 650px.
but when on ImageBrowser--> Insert Window --> I have a list of uploaded images --> if i am selecting images below max size but resolution is above 650px the images on preview are too stretched out.

I know we have an option to set the width n height when inserting but how do I auto set it before I hit insert button?
 I am thinking to use this:
<script>
    $(document).ready(function () {
        // Attach a click handler to the ImageBrowser tool of the Editor.
        $(".k-i-image").click(function () {
            setTimeout(function(){
                // Attach a select handler to the Upload embedded in the ImageBrowser.
                $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", function (e) {
                    // Prevent the event if the selected file exceeds the specified limit.
                    if (e.files[0].size > 1048576) {
                        e.preventDefault();
                        alert("Maximum allowed file size: 1MB");
                    }

                    // Check image resolution and limit width if necessary.
                    var img = new Image();
                    img.src = URL.createObjectURL(e.files[0].rawFile);

                    img.onload = function() {
                        if (img.width > 550) {
                            var canvas = document.createElement("canvas");
                            var ctx = canvas.getContext("2d");

                            // Calculate new height while maintaining the aspect ratio.
                            var ratio = 550 / img.width;
                            var newHeight = img.height * ratio;

                            canvas.width = 550;
                            canvas.height = newHeight;

                            // Draw the image on the canvas with the adjusted dimensions.
                            ctx.drawImage(img, 0, 0, 550, newHeight);

                            // Convert the canvas content back to a Blob object.
                            canvas.toBlob(function (blob) {
                                // Replace the original file with the resized image file.
                                e.files[0].rawFile = blob;
                            }, e.files[0].type);
                        }
                    };
                });
            });
        });
    });
</script>

                                                                                                                                                        
Anton Mironov
Telerik team
 answered on 08 Jun 2023
1 answer
70 views

I am using the Kendo Editor Image Browser from : https://demos.telerik.com/aspnet-mvc/editor/imagebrowser.
Where I have hidden/removed the 
1. Home icon
2.New Folder
3. Delete
4. Arrange By
5. Web Address
6. Alternate Text
using css on my local.

Is there any way to customize this without CSS?

Anton Mironov
Telerik team
 answered on 08 Jun 2023
1 answer
271 views
Hi - is it possible to rotate images with the image editor in ASP.NET MVC library?
Yanislav
Telerik team
 answered on 13 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?