在带有叠加层的页面上使用phantomjs捕获屏幕截图

我正在尝试将网站的特定div捕获到屏幕截图中以促进我必须做的一些繁重的工作.到目前为止,我正在使用我在这个完全相同的网站上找到的代码,这有点工作:

var page = require('webpage').create();

page.open('http://www.example.org', function() {
  // being the actual size of the headless browser
  page.viewportSize = { width: 1440, height: 900 };

  var clipRect = page.evaluate(function(){
    return document.querySelector("div.example").getBoundingClientRect();
  });

  page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
  };

  page.render('google.png');
  phantom.exit();
});

这实际上有效,但我有两个问题:

1)页面在第一次访问时有一个叠加,一个弹出窗口出现在屏幕截图上.2)图像显然是在需要渲染时下载的(它们仅在网页上滚动时出现)

所以最后我最终会得到这样的结果: 问题

我没有pha​​ntomjs的经验,所以我不知道我怎么能解决这个问题.在获取屏幕截图之前消除叠加DIV并以某种方式强制图像加载可能有效,但我不知道如何实际编码它.

非常感谢!

您可以以编程方式删除叠加元素,设置页面滚动位置(以像素为单位),等待几秒钟以加载图像,然后进行截屏.

var page = require('webpage').create();

page.viewportSize = { width: 1440, height: 900 };

page.open('http://www.jovago.com', function() {

    // jQuery is used at the target site
    page.evaluate(function(){
        $("#overlay, #modal").remove();
    });

    // Simulate scrolling down
    page.scrollPosition = {
        top: 1400,
        left: 0
    };    

    var clipRect = page.evaluate(function(){
        return document.querySelector("div.top-destinations-homepage.promo-banners-box").getBoundingClientRect();
    });

    page.clipRect = {
        top:    clipRect.top,
        left:   clipRect.left,
        width:  clipRect.width,
        height: clipRect.height
    };

    // Wait 10 seconds for images to download
    setTimeout(function(){
          page.render('jovago.png');
          phantom.exit();
    }, 10000);

});