Taking screenshots of webpages using Ruby

PhantomJS

Screencap gem

Webshot gem

Screencap and webshot are gems in Ruby that depends on a tool called PhantomJS. It is basically a web browser without a user interface, primarily used for testing websites. Such type of browsers are generally referred to as headless browsers,

Screenshots with PhantomJS

PhantomJS is quite easy to install and is multiplatform, available on major operating systems.

gem install phantomjs

To start, our script must require a reference to the webpage module then use it to create an instance:

var instance = require('webpage').create();

Use the instance.open() method and pass it the arguments, the url of the webpage that we want to capture screenshot.

instance.open('http://redpanthers.co', function() {
instance.render('screenshot-phantom.png');
phantom.exit();
});

instance.render() method captures the screenshot and saves it to the file specified in the argument. Run the script as,

phantomjs filename.js

Screenshot is saved in the  directory where we run the script. Now what we have above is all JavaScript, but to use the phantom JS in our rails application we have gems that provide us with an easy interface to acheive the same.

Screencap gem

The gem ‘screencap’ is introduced in Ruby to make screenshot capture easy. However, the gem depends on  ‘PhantomJS’, so we need to have PhantomJS installed on machine to capture screenshots with screencap gem. But screencap does not work with PhantomJS 2.1.1, which is the latest version. So we need to install version 1.9.8

gem install phantomjs -v 1.9.8

check version

phantomjs --version

To install screencap gem in your application, add this line to gemfile

gem 'screencap'

Or install it as

gem install screencap

Usage

To capture screenshot with screencap

require 'screencap'
screenshot = Screencap::Fetcher.new(<url>)
image = screenshot.fetch

• Fetcher class accepts url of the website to take screenshot.
• Screenshot is taken when fetch method is called.
• Also, fetch method supports various optional parameters to specify the area to capture the screenshot.
• We can specify where to store the screenshot captured, as shown below.

image = obj.fetch(
 output: '~/folder/file-name.png',
 # dimensions for taking screenshot of specific area
  width: 1024,
 height: 768
 )

Example

require 'screencap'
screenshot = Screencap::Fetcher.new('http://redpanthers.co')
image = screenshot.fetch(output: '~/screencap/screencap.png',
                                   width: 300,
                                  height: 500)

Our screenshot is captured in screencap.png

Webshot gem

Webshot is another gem introduced in ruby to capture screenshots, also depends on PhantomJS. For better experience, use latest version of PhantomJS. Webshot works with latest version of PhantomJS while screencap gem does not. Install PhantomJS latest version. To install webshot in your application,

gem 'webshot'

Or install as

gem install webshot

Usage

require 'webshot'
screenshot = Webshot::Screenshot.instance
screenshot.capture "https://github.com", "image.png", width: 1024, height: 800

Provide url of the web page and file name where screenshot to be saved. Height and width can be given as optional parameters for taking screenshot with specified dimensions. Above code captures github’s home page in file image.png In all the above methods, we capture screenshots of a particular web page by passing its url. Also we can infer that screencap gem, even though efficiently takes screenshots, does not work for latest version of PhantomJS. This was an issue encountered while working with gem screencap as installing PhantomJS without specifying the version would install the latest version by default. So, choose gem webshot if you want to go ahead with the latest version of PhantomJS.

References

• PhantomJS
• Screencap gem
• Webshot gem

]]>