Trips of a curious penguin.

Taking Retina screenshots with PhantomJS

May 12th, 2012

With PhantomJS, a headless WebKit browser with Javascript API, you can automatically render a webpage like you see it on your screen in an image or PDF. This is an awesome feature, useful for testing or - that’s what I use it for - rendering some elements of the page as images for later use.

Here I will explain how to take Retina-like screenshots. These are screenshots with double width and height for the same element where the details are rendered with double the precision. There are different reasons to want that: you might not own a new iPad or an iPhone4* and want to see how your website would look on these devices or you might want to add a Retina unit test to your awesome test stack. I want to render text to images so that they will still look sharp on Retina screens when used as replacements.

The key is the CSS3 transform property and its scale(2) value, plus a couple of tweaks.
Here is a modified version of the rasterize.js example to output Retina screenshots.

Comments

About Me

I am Filippo Valsorda (@FiloSottile) an Italian consultant specialized in cryptography and security with a passion for Python, Go and maths.
I am one of the guys currently behind youtube-dl and I attended Hacker School in NYC. Now I'm in Milan.