使用Spatie的Browsershot/Headless Chrome捕获极长的屏幕截图

Question

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

这是Puppeteer (有文档记录的here)的一个已知限制。目前推荐的解决方法似乎是拍摄几个屏幕截图，并使用clip()将屏幕截图偏移16384px的增量。您可以使用Node.js here查看此方法的示例。

现在，在客户端，这种方法似乎工作得足够好，但在Browsershot库的上下文中，这并不能真正帮助我们。据我所知，在PHP中没有可行的方法来获得页面的高度；有人能在服务器端想出任何潜在的变通办法来截取一个非常长的屏幕截图吗？

我知道这并不是这个库的预期用途，归根结底，它甚至不是这个库的限制，但我想我还是把它扔出去吧。

Answer 1

通过对Spatie的Browsershot的新贡献，您可以使用所提供的example中的方法轻松地捕获非常高的web页面。

$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');
}