Hi folks,
I'm trying to use the Kendo React Drawing API to draw an Image at its' native dimensions. The Image source will be a URL and could be an image not known at code-time but instead specified at run-time.
The documentation found here shows that I first need to specify the Image dimensions before I know what they will be.
const imageRect = new geom.Rect([5, 5], [50, 50]);
const image = new Image('../assets/diego.jpg', imageRect);
My issue is that `diego.jpg` may not be 50x50 for example.
How can I use `Image` while also allowing it to be the native image dimensions?
Thanks
Rank 1
1 Answer, 1 is accepted
Hi Ryan,
I have answered in the ticket that you have opened for the same issue. If further assistance is needed, we can use the ticket system.
Just for reference I will paste the answer here as well:
The drawing API requires a Rect with specified dimensions and URL for the image. However, after some research I have found the following forum thread with suggestions on how to retrieve the dimensions of an image from given URL: https://stackoverflow.com/questions/5633264/javascript-get-image-dimensions
It should be possible to gather the information before starting to draw the elements and create an array with the images url for example and their dimensions and once you start the drawing, you can use that information to create the Rect with the already retrieved dimensions. As a side note, if you already have the images loaded in the DOM, it should be easier to retrieve the dimensions of those elements in the DOM (if they are loaded in their original size, without explicit dimensions). However, you will still have to use the URL for the drawing.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.