I have been trying to convert an HTML node in my react code into Image and download it afterward. There are several libraries which we can use to perform that job for us like html-to-image, dom-to-image. But the problem is these libraries download the image at its view size, not at its original size.
I mean if I have a component that has different styles at different screens when I download an image of that component I want the image to have the styles of the larger screen, irrespective of what my current window size is.
If I have a responsive component that spreads and shrinks with the window size I want the image of that component to look like how the component looked at larger screens.
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image.
If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element.
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image. If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element. Edited the image for minimum required of pixels.
I have found that we can only download an HTML node in a react tree at its view size and style. Suppose that we have a table in a page. When we are a large screen we see that table in one style. But on a smaller screen, we see it in a different style. When we download an image of that table, we want the table to be downloaded at its large-screen style and size, irrespective of the screen size.
Apparently, we can only download what is present in the physical DOM. If the physical DOM has a smaller version we can only download the smaller version of it. If physical DOM contains a larger version of the table we can download the larger version on it.
What I did to overcome this problem is to open a modal when user wanted to download the image of that table. I drew a large version of the table with fixed height and width on that modal and downloaded the image from that modal. In smaller screen this big Table inside a modal was not looking very nice, even though it was for few moments only. So to hide this big table, I have put a nice loading animation on top with fixed position. After download completes, I close the modal.