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>
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?