High resolution screenshot of MultiQC HTML report

Ask for help
1

Hi everyone,

I’m facing a bit of a challenge. I’d like to include a high-resolution screenshot of my MultiQC HTML report in a poster, but the quality isn’t sufficient.

Does anyone have any tips or suggestions for capturing a higher-resolution screenshot of a MultiQC report?

I’ve tried using standard screenshot tools but haven’t had much luck. Any advice would be greatly appreciated!

2

Hi @jinfinance,

I’ve done two things in the past before:

  1. Use a really big monitor / highest resolution I can and make the window fit the screen, then increase the browser zoom to like 800% - same layout but more pixels. Note that Chrome devtools has options for screenshots of the entire (full length) report, so it’s only width that you need.
  2. Many years ago I did a poster and managed to somehow do an SVG (vector) export of the page. But that was like, 2016 or something and I honestly can’t remember how I did it. But maybe worth googling if the above is insufficient.

Hope that helps!

Phil

3

Thank you Phil !

Indeed I was able to convert the screenshot to a SVG file. The key step is to print the screenshot as a PDF file first, then do the conversion from pdf to svg (there are free tools online for this)

I found the followings important in the print to PDF step:

Disable print CSS media If you try to print the page now, printer only CSS styles will be applied. This usually hides elements and changes colours on the page to make it more printer friendly. (quote from ‘checkbot.io’).

— with Chrome, Developer Tools , click the three dots in the top right corner, go to More tools > Rendering and set Emulate CSS media to screen

To print the page, go to File > Print , make sure background graphics is ticked

1 Like