How to make screenshots in Laravel with Browsershot

Introduction

Browsershot is a software by Spatie that converts a webpage into an image or PDF by utilising a headless instance of Chrome. In this post, you will learn how to install it in your Laravel application and use it.

Prerequisites

Debian 11 virtual machine up and running
Laravel 8 application up and running
PHP 7.3 installed

Installation

The installation is pretty straight-forward. Go to your Laravel root directory and enter the following command:



composer require spatie/browsershot

This will update the dependency list in your composer.json file and install browsershot in your vendor directory.

There is one more software we need that is called Puppeteer:



npm install puppeteer --global

In case you are encountering errors with the installation / usage later on, please reference this webpage from the official documentation of Spatie.

Usage

To use Browsershot, we first need to create a controller:



php artisan make:controller BrowsershotController

At first your controller will look like this:



<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BrowsershotController extends Controller
{
    //
}

And here the very first thing we need to reference browsershot. Let's do this by including the following line on line 6:



use Spatie\Browsershot\Browsershot;

Now that we have Browsershot referenced, we are ready to go! Let's create a function that creates a screenshot of Google and saves it to our storage directory.



function screenshotGoogle() {
    Browsershot::url('https://google.com')
            ->setOption('landscape', true)
            ->windowSize(3840, 2160)
            ->waitUntilNetworkIdle()
            ->save("storage/" . 'googlescreenshot.jpg');
}

Let's explain what each line does.



Browsershot::url('https://google.com')

This line we set what URL we want to screenshot.



->setOption('landscape', true)

With this line we set the orientation to landscape



->windowSize(3840, 2160)

With this line we set the window size (width, height)



->waitUntilNetworkIdle()

With this line we set our command to screenshot ONLY if network is idle, meaning the page is fully loaded.



->save("storage/" . 'googlescreenshot.jpg');

With this line we set the path in which our screenshot is being saved.

Final Result

Now that we have our function in place, let's create a route in our web.php file so that we can execute the function. Open your web.php file and on top make sure to reference the controller:



use App\Http\Controllers\BrowsershotController;

Include an entry that follows the Laravel 8 syntax:



Route::get('/test-screenshot', [BrowsershotController::class, 'screenshotGoogle']);

Now go and enter the url in your browser (http://your-website.com/test-screenshot) and you should be greeted by a white screen after a couple seconds of loading. This means the screenshot has successfully been taken. Go to your storage/app/public directory and you should see a jpg entry named googlescreenshot that looks like this:

Conclusion

In this post you learned how to use Browsershot to make screenshots of website from your Laravel application. For more tutorials like this one, thoughts, and general stuff from my tech world, make sure to follow me here or on Twitter!

Blog