I need a screenshot from our web application. It will go on a printed poster, so I need it in a high DPI version. I have a 96 DPI monitor, so a standard screenshot pixelates when printed. My solution to this problem was to
- Calculate the pixel number I need such that the picture can be printed in 300 dpi in the size I need
- set the Responsive Design tool in Firefox to exactly that size viewport, say X by Y pixels
- zoom with Ctrl + + until the needed design elements filled the view (that part is important - the solution needs to work when the content is zoomed in or zoomed out)
- use the built-in screenshot tool to make a screenshot.
- use GIMP to change the image resolution to 300 dpi without changing the actual number of pixels
To my surprise, the screenshot was not X by Y pixels, but a smaller size, for example 0.67X by 0.67Y, so I could only get a 200 dpi image without scaling it up. The factor also varied. After playing around, I found out that the size of the screenshot is determined by the level of zoom.
Using an addon to make the screenshot (Awesome Screenshot Plus) produced the exact same problem. Using Chrome produced a different problem, as Chrome does not render the complete large viewport, and only part of the image is captured. To my knowledge, IE does not have a tool for enlarging the viewport size beyond the physical screen limits.
I am working on a Windows PC and my department does not have the budget to invest in a paid dedicated tool for this task.