Browsershot is a package that can easily convert any webpage into a image. Under the hood the conversion is made possible new headless options in Chrome 59. In this post I'd like to show you how you can use Browsershot v2.

Here's a quick example of how it can be used:

Browsershot::url('https://example.com')->save($pathToImage);

History

About three years ago I started working on my first package, called Browsershot. It can convert any webpage to an image. Under the hood PhantomJS was used to perform the transformation. Since it got released it did it's job pretty well, but unfortunately PhantomJS recently has been abandoned.

A few weeks ago Chrome 59 got released. In that version some pretty cool features were introduced. One of them is the ability to take screenshots of a webpage. A recent version of Chrome probably is better in rendering a correct page then and abandoned version of PhantomJS. That's why I decided to make a new major release of Browsershot. In this post I'd like to show you how you can use Browsershot v2.

Installing Chrome 59

In order to make use of Browsershot you must make sure that Chrome 59 or higher is installed on your system. On a Forge provisioned Ubuntu 16.04 server you can install the latest stable version of Chrome like this:

sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get -f install
sudo apt-get install google-chrome-stable

Browsershot has been tested on MacOS and Ubuntu 16.04. If you use another OS your mileage may vary.

Using Browsershot

Here's the easiest way to create an image of a webpage:

Browsershot::url('https://example.com')->save($pathToImage);

Browsershot will make an education guess where Google Chrome is located. If on your system Chrome can not be found you can manually hint it's location:

Browsershot::url('https://example.com')
   ->setChromePath($pathToChrome)
   ->save($pathToImage);

By default the screenshot will be a png and it's size will match the resolution you use for your desktop. Want another size of screenshot? No problem!

Browsershot::url('https://example.com')
    ->windowSize(640, 480)
    ->save($pathToImage);

You can also set the size of the output image independently of the size of window. Here's how to resize a screenshot take with a resolution of 1920x1080 and scale that down to something that fits inside 200x200.

Browsershot::url('https://example.com')
    ->windowSize(1920, 1080)
    ->fit(Manipulations::FIT_CONTAIN, 200, 200)
    ->save($pathToImage);

In fact, you can use all the methods spatie/image provides. Here's an example where a greyscale image is created:

Browsershot::url('https://example.com')
    ->windowSize(640, 480)
    ->greyscale()
    ->save($pathToImage);

If, for some reason, you want to set the user agent Google Chrome should use when taking the screenshot you can do so:

Browsershot::url('https://example.com')
    ->userAgent('My Special Snowflake Browser 1.0')
    ->save($pathToImage);

In closing

The screenshot capabilities of Chrome are already quite good, but there's a lot of room for improvement still. Right now there's no way to specify where Chrome should save the screenshot (a problem that the package solves for you behind the scenes). In the DevTools there's an option to take a screenshot of the whole length of the page. Unfortunately this isn't possible with the current command line options.

I'm pretty sure the headless and screenshotting options will improve in future versions of Chrome. I intend to update Browsershot as soon as new features become available in Chrome.

Want to get started using Browsershot? Then head over to GitHub. Also take a look at the other packages our team has previously made.