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

Question

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

这是Puppeteer的已知限制(此处记录).目前推荐的解决方法似乎是采用了几个屏幕截图,并使用clip()以16,384px的增量来抵消屏幕截图.您可以在此处查看使用Node.js的此方法的示例.

现在,在客户端,这种方法似乎运行得很好,但在Browsershot库的上下文中,这并没有真正帮助我们.据我所知,在PHP中获取页面高度没有可行的方法; 任何人都可以想到服务器端的任何潜在的解决方法来破解极长的截图吗？

我知道这不是库的预期用途,并且在一天结束时,它甚至不是图书馆的限制,但我认为无论如何我都会把它扔出去.

Answer 1

通过 Spatie 的Browsershot的新贡献，您可以使用您提供的示例中的方法轻松捕获极高的网页。

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