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.
You might want to render only a single element, for example your content div or your always-buggy sidebar, to an image.
Well, have a look at
element.getBoundingClientRect (getBoundingClientRect is Awesome) and PhantomJS
Here is a spoiler ;)
- Use PhantomJS to take screenshots of your webapp for you - /home/florian
- Rendering QuickStart example - PhantomJs Wiki