I made a plugin that you can easily take a screenshot of any element, just give it an ID.
You can use it yourself here:
HTML to PNG | No Code Data Visualization
Plugin Page:
2 Likes
Hi @NoCodeDataArtisan- great plugin! How would you assess the quality of the images? I need an HTML to image feature in my app and I need something that 1) is reliable, well maintained and won’t break the app and 2) can maintain very specific resolutions (e.g., width: 2,480px, height: 1,748 px, and dpi: 300). I think I might need to go the HTML to PDF route. Do you have plans to add PDF support?
1 Like
Hi, thanks. 
Usually, when we take a photo from the screen, the quality of the photo is determined according to the quality of that screen.
For example, if you check the size of your screenshots, all the height and width are the same as the length and width of your monitor screen in pixels.
It is the same for this plugin, if you set the quality to 1, get an image with the (height and width of that element) * (User’s screen effect).
For example, I am using Surface, which has a 4K screen, so Windows applies 200% zoom by default to make things bigger.
As you can see, the element on the demo page is 480 x 320 pixels, now if we save the captured image with quality 1. These are its specifications:
According to my current screen zoom of 200%, the size of the image is two times the size of the element.
In short, I have no control over it
But in your case, I think the aspect ratio is more under control.
2 Likes