How do I add a feature to auto check for the Image resolution and set it to custom, when uploading the stored Image using Image Browser on Kendo Editor

1 Answer 138 Views
Editor ImageEditor
shashank
Top achievements
Rank 1
Iron
shashank asked on 05 Jun 2023, 07:30 PM

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>

                                                                                                                                                        

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 08 Jun 2023, 12:13 PM

Hello Shashank,

Thank you for the code snippet and details provided.

Feel free to add custom implementations as per the needs of your application.

The available configurations for the imagebrowser are listed in the article below:

The following article represents the API of the Editor(configuration options, methods, and events):

 

Kind Regards,
Anton Mironov
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

shashank
Top achievements
Rank 1
Iron
commented on 08 Jun 2023, 02:04 PM | edited

Can you show me an example using dojo?
Upon selecting the k-listview-item.k-state-selected on the Insert Image dialog box I have to grab the width and height from the url of the image and auto adjust to below 690px if it is greater than 690px.

And all our images are uploaded to a azure blob storage. the listview items I see when I click the Insert Image on Kendo Editor are the images stored in blob.
How do I get the image's width and height to be displayed in fields of Width(k-editor-image-width) and Height(k-editor-image-height).

Anton Mironov
Telerik team
commented on 13 Jun 2023, 07:10 AM

Hi Shashank,

Please, feel free to use the API of the Editor.

Let me know if my assistance is needed when the desired behavior is achievable by using the Method, Events, and Configuration options of the Editor. For the custom implementations, you could use the Professional Services Team. 

 

Best Regards,
Anton Mironov

Tags
Editor ImageEditor
Asked by
shashank
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or