Slimerjs 仅对可见区域进行快照

Question

我正在使用 slimerjs 进行屏幕截图，如果您指定的宽度小于页面的最小宽度 - 会切到可见区域。

这只发生在 Facebook 上。

https://github.com/Samael500/save_screenshot_test/blob/32af68387072a690ebce18b29c973330ac2497b4/img/slimerjs/www.facebook.com-240px.png

但在其他网站（例如 Google）上呈现所有页面。

https://github.com/Samael500/save_screenshot_test/blob/32af68387072a690ebce18b29c973330ac2497b4/img/slimerjs/google.com-240px.png

我用这个脚本截屏

    var page = require('webpage').create();
    page.settings.userAgent = 'Mozilla/5.0 (X11; Linux x86_64) Gecko/20100101 Firefox/36.0';
    page.open('https://www.facebook.com/', function (status) {
        page.viewportSize = { width:240, height:768 };
        page.render('img.png');
        page.close();
        slimer.exit();
    });

然后这样称呼它 $ ./slimerjs slimer_screen.js --ssl-protocol=any

如何获取完整的 facebook 页面快照？

Answer 1

我找到了解决方案。在打开页面之前，您必须指定浏览器的原生分辨率。

var page = require('webpage').create();
page.viewportSize = { width:1024, height:768 };
page.settings.userAgent = 'Mozilla/5.0 (X11; Linux x86_64) Gecko/20100101 Firefox/36.0';
page.open('https://www.facebook.com/', function (status) {
    page.viewportSize = { width:240, height:768 };
    page.render('img.png');
    page.close();
 slimer.exit();
});

所以解决方案符合page.viewportSize = { width:1024, height:768 };