javascript - 为什么 page.render 在 PhantomJS 中只从页面顶部获取图像？

Question

我使用 PhantomJS 从 Facebook 群组获取一些数据。

我的流程非常简单:

1. 打开页面
2. 打印屏幕
3. 向下滚动
4. 转到步骤 2

从日志中我看到网页高度增加，但我得到的图像 - 始终相同。

相关代码如下:

var index_screen  = 0;

page.onConsoleMessage = function(msg) {
     if (msg == "__screen__") {
    console.log("print screen");
   page.clipRect = { top: 0, left: 0, width: 1680, height: 1050 };
    page.render(index_screen + "_test.png");
    index_screen++;   
    }


...


 evaluate(page, function() {  

var scrollInterval = setInterval(function() {   

                    console.log("__screen__");

                    console.log("screen hight: ",  document.body.scrollHeight); 

                    window.document.body.scrollTop = document.body.scrollHeight;    

                    console.log("after screen: ",  window.document.body.scrollTop);


                    }, 15000);

 }); // end evaluate    

我得到的输出:

page: screen hight:  4494
page: after screen:  4194

page: screen hight:  8397
page: after screen:  8097

page: screen hight:  12390
page: after screen:  12090

...

这意味着代码可以工作，我向下滚动，但所有图像都显示在页面顶部。

我错过了什么吗？

请帮忙，

谢谢

Answer 1

您的 page.clipRect = { top: 0, left: 0, width: 1680, height: 1050 }; 行表示“始终给我页面的前 1050 个像素”。

如果“h”是当前屏幕高度，并且最初 var prevHeight = 0，您需要执行以下操作:

page.clipRect = { top: prevHeight, left: 0, width: 1680, height: h - prevHeight };
prevHeight = h;