javascript - 使用 Spatie 的 Browsershot/Headless Chrome 截取超长截图

Question

我经常遇到需要使用 Spatie 的 Browsershot 的场景捕获非常高的网页。但是，当我这样做时，生成的屏幕截图每 16,384 个像素重复一次。 (您可以在此处查看重复示例:https://github.com/GoogleChrome/puppeteer/issues/1576)

这是 Puppeteer 的一个已知限制(记录在 here 中)。目前推荐的解决方法似乎是截取多个屏幕截图，并使用 clip() 以 16,384 像素的增量偏移屏幕截图。您可以使用 Node.js 查看此方法的示例 here .

现在，在客户端，这种方法似乎工作得很好，但在 Browsershot 库的上下文中并不能真正帮助我们。据我所知，在 PHP 中没有可行的方法来获取页面的高度；谁能想到在服务器端破解超长屏幕截图的任何潜在解决方法？

我知道这并不是图书馆的真正用途，归根结底，这甚至不是图书馆的限制，但我想无论如何我都会把它扔掉。

Answer 1

随着对 Spatie 的新贡献 Browsershot您可以使用您提供的方法捕获非常高的网页 example很容易。

$url = 'http://www.spiegel.de';

//Get scrollWidth and scrollHeight of the body in the emulated device
$browsershot = new Browsershot($url, true);
$dimensions = $browsershot
    ->device('iPhone 6')
    ->waitUntilNetworkIdle() // ensuring all additional resources are loaded
    ->evaluate("JSON.stringify({height: document.body.scrollHeight, width: document.body.scrollWidth})");

$dimensions = json_decode($dimensions); 

// iphone 6 scale factor is equal to 2
// https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js#L288
$dpr = 2; 
$maxScreenshotHeight = floor(16 * 1024 / $dpr);

for ($ypos = 0; $ypos < $dimensions->height; $ypos += $maxScreenshotHeight) {
    $height = min($dimensions->height - $ypos, $maxScreenshotHeight);
    $browsershot = new Browsershot($url, true);
    $browsershot
        ->device('iPhone 6')
        ->waitUntilNetworkIdle()
        ->clip(0, $ypos, $dimensions->width, $height)
        ->timeout(120000) // handling timeout
        ->save('screenshot-@' . $ypos . 'px.png');
}