Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Headless Browser Experiments

Headless Browser Experiments

A short journey about taking screenshots with headless browsers.

Christian Bäuerlein

January 28, 2016

More Decks by Christian Bäuerlein

Other Decks in Programming


  1. HEADLESS BROWSER EXPERIMENTS A short journey about taking screenshots with

    headless browsers Christian Bäuerlein / @fabrik42
  2. The challenges: How to render a list of created apps?

    How to share your creations with others?
  3. HTML IS NOT SHAREABLE URLs are easy to share. Textual

    content is easy to share. Visual representations in HTML are not easy to share. But images are :)
  4. PHANTOMJS 1.X Good Just one binary Not So Good Project

    was somehow stalled Bad No web font support :(
  5. RESPONSIVE MOCKUPS Takes screenshots of a webpage in different resolutions

    and automatically applies it to mockup templates.
  6. HOW IT WORKS 1. User provides URL and template name.

    2. PhantomJS generates screenshots based on different viewports. 3. PhantomJS assembles mockup image using a local HTML file and <canvas>.
  7. STOP MOTION IN HTML & JS Create an animation Stop

    at every frame Make a screenshot Go to the next frame