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
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.
Rank 1
Iron
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).
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