Question

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

这是Puppeteer的已知限制（记录为here）。目前推荐的解决方法似乎是采用多个屏幕截图，并使用clip()以16,384px的增量来抵消屏幕截图。您可以使用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');
}

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

1 个答案: