DEV Community

Cover image for How to make screenshots in Laravel with Browsershot
Kuberdenis
Kuberdenis

Posted on

How to make screenshots in Laravel with Browsershot

#laravel #php #backend

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!

Top comments (5)

Collapse
 
bobbyiliev profile image
Bobby Iliev •

Great post! Super cool to see some Laravel content by you! πŸš€

Collapse
 
kubeden profile image
Kuberdenis •

πŸ™Œ πŸ™

Collapse
 
jeenus14 profile image
blaster •

Hi bro. My application always shows this:
Symfony\Component\Process\Exception\ProcessFailedException: The command "node ^"C:^\xampp^\htdocs^\NFT-Plus-Phase-2^\vendor^\spatie^\browsershot^\src/../bin/browser.js^" ^"^{^^"url^^":^^"https:^\/^\/google.com^^",^^"action^^":^^"screenshot^^",^^"options^^":^{^^"type^^":^^"png^^",^^"path^^":^^"test^\/googlescreenshot.jpg^^",^^"args^^":^[^],^^"viewport^^":^{^^"width^^":3840,^^"height^^":2160^},^^"landscape^^":true,^^"waitUntil^^":^^"networkidle0^^"^}^}^"" failed.

Exit Code: 1(General error)

Working directory: C:\xampp\htdocs\NFT-Plus-Phase-2\public

Output:

Error Output:

'node' is not recognized as an internal or external command,
operable program or batch file.
in file C:\xampp\htdocs\NFT-Plus-Phase-2\vendor\spatie\browsershot\src\Browsershot.php on line 862

Collapse
 
isaac97 profile image
をむアック •

->setNodeBinary($path_to_node)

Collapse
 
merite15 profile image
Merite15 •

I'm on windows machine and i have this error For some reason Chrome did not write a file at test.pdf. Command ======= [] Output ======
Image description

Read next

spiechu profile image

How to run Laravel scheduler in Docker container

Dawid Spiechowicz -

hakobyansen profile image

Routing implementation using PHP attributes

Senik Hakobyan -

xxzeroxx profile image

PHP 8 News: Enumerations

Antonio Silva -

elanatframework profile image

How to Load Controller Class From Another DLL?

elanatframework -