Convert HTML to Image at its Original Dimentions

Question

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.

score 0 · Answer 1 · answered Oct 12 '21 at 06:08

0

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.

Refer this link

answered Oct 12 '21 at 06:08

Akshay Mathur

421
4
6

there is on image. only html. i want to download the HTML view as an image. but HTML view changes when screen size changes. i want the image to be downloaded in the original size. – asif.ibtihaj Oct 12 '21 at 07:41
You can use canvas element in this case. You can get the dimensions of the image by drawing it on the canvas element and then download the image with the size specified on canvas. If you need any help in doing so then kindly refer https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage – Akshay Mathur Oct 17 '21 at 06:30

score 0 · Answer 2 · answered Oct 12 '21 at 06:27

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.

score 0 · Accepted Answer · answered Mar 14 '22 at 18:33

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.

Convert HTML to Image at its Original Dimentions

3 Answers3