Javascript 在带有覆盖的页面上使用phantomjs捕获屏幕截图

我正试图把一个网站的一个特定部分截图，以便于我做一些繁重的工作。到目前为止，我正在使用我在这个完全相同的网站上找到的代码，有点有效：

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） 图像显然是在需要渲染时下载的（它们仅在网页上滚动时出现）

最后，我得出了这样的结论：

我没有使用phantomjs的经验，所以我不知道如何解决这个问题。消除叠加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);

});

---

您是否控制了您试图刮取的站点？i、 代码…在我看来有两种方法可以解决这个问题。如果您可以控制目标网站代码，那么您可以将回调放在与phantomjs对话的javascript中。如果您没有控制权，那么最好使用超时等待页面完成加载所有内容……打开wep页面，获取特定的覆盖容器，将css更改为

display:none

，然后将页面呈现为图像。您也可以通过更改滚动位置向下滚动。检查链接没有控件，知道如何实现滚动吗？这是唯一剩下的东西，谢谢你的帮助！谢谢你，伙计！现在可以工作了，我仍然无法及时加载图片，但是在截图之前我会尝试在phantomjs上滚动。有什么想法可以实现一些？你是救命恩人，谢谢！已更新答案，带有滚动代码。图片已经准备好了：如果答案有用，别忘了投票并接受！）@托洛斯：你是能够像你发布的例子那样滚动，还是动态滚动？如果您事先不知道页面的高度，如何滚动？该网站的屏幕截图看起来如何？