Laravel 12 - How to Generate Website Screenshots with BrowserShot

Quick Overview

Step # 1 : Set Up Fresh Laravel 12 Project.

composer global require laravel/installer

laravel new browserShot

• Starter Kit – Select None.
• Testing Framework – Choose Pest.
• Database – Pick MySQL.
• Run default migrations? – Type yes.
• Run npm install and npm run build? – Type yes.
  
  

Step # 2 : Access the browserShot Project.

cd c:xampp/htdocs/browserShot

Step # 3 : Install BrowserShot and Its Dependencies.

composer require spatie/browsershot

npm install puppeteer

Step # 4 : Generate the BrowserShot Controller.

php artisan make:controller BrowserShotController

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Spatie\Browsershot\Browsershot;
class BrowserShotController extends Controller
{
    public function capture()
    {
        // Define the path to the public/Browsershot directory and set a unique filename
        $directory = public_path('Browsershot');
        $filePath = $directory . '/' . time() . 'screenshot.png';
        // Create the Browsershot directory if it doesn't already exist
        if (!file_exists($directory)) {
            mkdir($directory, 0755, true);
        }
        // Capture a screenshot of the target page at desktop resolution, waiting until the page is fully loaded
        Browsershot::url('https://getbootstrap.com/')
            ->windowSize(1920, 1080)
            ->waitUntilNetworkIdle()
            ->save($filePath);
        return "Screenshot saved at: " . $filePath;
    }
}

Step # 5 : Set Up the Route.

use App\Http\Controllers\BrowserShotController;

Route::get('/screenshot', [BrowserShotController::class, 'capture']);

Step # 6 : Test the BrowserShot Setup.

php artisan serve

public function capture()
{
    // Define directory and file path
    $directory = public_path('Browsershot');
    $filePath = $directory . '/' . time() . 'document.pdf';
    // Ensure the directory exists before saving the file (Browsershot doesn't create directories like Laravel's storage helper)
    if (!file_exists($directory)) {
        mkdir($directory, 0755, true);
    }
    // Capture a PDF of the given URL, ensuring the page is fully loaded before saving the document
    Browsershot::url('https://getbootstrap.com/')
        ->waitUntilNetworkIdle()
        ->savePdf($filePath);
    return "PDF saved at: " . $filePath;
}

    public function capture()
    {
    // Define directory and file path
        $directory = public_path('Browsershot');
        $filePath = $directory . '/' . time() . 'screenshot.png';
    // Create directory if not exists
        if (!file_exists($directory)) {
            mkdir($directory, 0755, true);
        }
    // Ensures the entire page is captured (Desktop Size)
        Browsershot::url('https://getbootstrap.com/')
        ->windowSize(1920, 1080)
        ->waitUntilNetworkIdle()
        ->fullPage()
        ->save($filePath);
        return "Screenshot saved at: " . $filePath;
    }

public function capture()
{
    // Define directory and file path
    $directory = public_path('Browsershot');
    $filePath = $directory . '/' . time() . 'screenshot.png';
    // Create directory if not exists
    if (!file_exists($directory)) {
        mkdir($directory, 0755, true);
    }
    // Alternatively, for mobile size, use a mobile user agent to ensure the website loads the mobile version for accurate capture.
    Browsershot::url('https://getbootstrap.com/')
        ->windowSize(375, 667)
        ->userAgent('Mozilla/5.0 (Linux; Android 10; Pixel 3 XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36')
        ->waitUntilNetworkIdle()
        ->save($filePath);
    return "Screenshot saved at: " . $filePath;
}

Conclusion