DEV Community

Cover image for How to make screenshots in Laravel with Browsershot

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

At first your controller will look like this:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BrowsershotController extends Controller
{
    //
}

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

Let's explain what each line does.

Browsershot::url('https://google.com')
Enter fullscreen mode Exit fullscreen mode

This line we set what URL we want to screenshot.

->setOption('landscape', true)
Enter fullscreen mode Exit fullscreen mode

With this line we set the orientation to landscape

->windowSize(3840, 2160)
Enter fullscreen mode Exit fullscreen mode

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

->waitUntilNetworkIdle()
Enter fullscreen mode Exit fullscreen mode

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

->save("storage/" . 'googlescreenshot.jpg');
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Include an entry that follows the Laravel 8 syntax:

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

Enter fullscreen mode Exit fullscreen mode

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:

browsershot image example

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!

Discussion (2)

Collapse
bobbyiliev profile image
Bobby Iliev

Great post! Super cool to see some Laravel content by you! 🚀

Collapse
asciiden profile image
Denislav Gavrilov 👨‍🚀🤖🤷‍♂️ Author

🙌 🙏