Capturing retina screenshots on a non-retina device via Xvfb

README.md

We are bootstrapping a startup and don't own any retina devices to capture high resolution screenshots. Thankfully, this is possible via Xvfb.

Convenience Node.js script here: https://gist.github.com/twolfson/4f7e7ec7d6969173d6a095f86e2d47c8

Here's how to get started manually:

• Launch an Xvfb instance with retina-scale DPI
  • Xvfb :99 -screen 0 3840x2160x24 -dpi 240
  • We'll be using :99 as our $DISPLAY but any unused value will do
  • Note that we are using 2x our expected resolution for dimensions (1920x1080 * 2 -> 3840x2160)
• Launch our browser inside of Xvfb
  • We prefer using Selenium but any interface should work. In the StackOverflow post we distilled this from, they were using x11vnc
    • http://stackoverflow.com/questions/31400685/how-to-take-retina-screenshots-with-xvfb-and-selenium
  • Here's our JS variant:
    • browser.init({browserName: 'firefox', firefox_binary: '/.../firefox' /* Needed due to Firefox > 48 not being supported by Selenium yet */});
    • browser.setWindowSize(960, 1000);
    • browser.get('http://google.com/');
• Export our Xvfb via ImageMagick
  • import -window root out.png
  • We cannot export contents via Selenium as they get downscaled to 1x =(
  • We can target the window specifically as well via
    • xwininfo -root -children
      • Lists child windows
      • Find something that looks like a large window
        • 0x200023 "Mozilla Firefox": ("Navigator" "Firefox") 3456x1944+0+0 +0+0
    • Export that window via ImageMagick
      • import -window 0x200023 out.png

Attribution:

• http://stackoverflow.com/a/38186340
• Past experience from https://github.com/twolfson/controlpad