使用Spatie Browsershot创建网页截图的高级指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00103/article/details/148507867

使用Spatie Browsershot创建网页截图的高级指南

browsershot Convert HTML to an image, PDF or string 项目地址: https://gitcode.com/gh_mirrors/br/browsershot

前言

在现代Web开发中，经常需要将网页内容转换为图片格式。Spatie Browsershot是一个强大的PHP库，它基于Puppeteer，允许开发者以编程方式捕获网页截图。本文将深入探讨如何使用Browsershot创建高质量的网页截图，并介绍各种高级功能和技巧。

基础使用

最简单的截图方法

创建网页截图最基本的方式是使用url方法指定目标网页，然后调用save方法保存图片：

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

这行代码会捕获指定URL的网页，并将其保存为PNG格式的图片到指定路径。

图片格式设置

默认格式与JPEG选项

默认情况下，Browsershot会生成PNG格式的图片。如果需要JPEG格式，可以使用setScreenshotType方法：

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

其中第二个参数是JPEG质量，范围是0-100，数值越高质量越好但文件越大。

图片尺寸控制

调整窗口大小

通过windowSize方法可以设置浏览器窗口的尺寸，从而控制截图的大小：

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

局部截图

如果只需要截取网页的某一部分，可以使用clip方法：

Browsershot::url('https://example.com')
    ->clip($x, $y, $width, $height)
    ->save($pathToImage);

参数说明：

$x和$y是截图区域的左上角坐标
$width和$height是截图区域的宽高

元素级截图

要截取特定元素的截图，可以使用select方法：

Browsershot::url('https://example.com')
    ->select('.some-selector', $selectorIndex)
    ->save($pathToImage);

$selectorIndex参数可选，用于选择匹配的第n个元素（从0开始计数）。

高级功能

获取Base64编码的图片

有时我们不需要将图片保存到磁盘，而是需要Base64编码的字符串：

$base64Data = Browsershot::url('https://example.com')
    ->base64Screenshot();

图片处理

Browsershot可以与spatie/image库集成，对截图进行各种图像处理操作。首先需要安装依赖：

composer require spatie/image

然后就可以使用各种图像处理方法，例如转换为灰度图：

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

整页截图

要捕获整个网页（包括滚动部分），使用fullPage方法：

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

高DPI截图

通过deviceScaleFactor方法可以生成高DPI截图，模拟视网膜显示屏效果：

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

移动设备模拟

基本移动模拟

要模拟移动设备视图，可以使用mobile和touch方法：

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

特定设备模拟

Browsershot支持模拟特定设备，如iPhone X：

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

这相当于手动设置所有相关参数（用户代理、窗口大小、设备缩放因子等）。

其他实用功能

隐藏背景

使用hideBackground方法可以忽略网页背景：

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

处理弹窗

自动关闭JavaScript弹窗，避免截图失败：

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

禁用JavaScript

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

禁用图片

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

资源加载等待

等待网络空闲后再截图，确保所有资源加载完成：

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

延迟截图

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

等待JavaScript条件

Browsershot::url('https://example.com')
    ->waitForFunction('window.innerWidth < 100')
    ->save($pathToImage);

添加JavaScript/CSS

// 添加JavaScript
Browsershot::url('https://example.com')
    ->setOption('addScriptTag', json_encode(['content' => 'alert("Hello")']))
    ->save($pathToImage);

// 添加CSS
Browsershot::url('https://example.com')
    ->setOption('addStyleTag', json_encode(['content' => 'body{color: red;}']))
    ->save($pathToImage);