Question

不确定我做错了什么。在PhantomJS中运行时，它只是挂起而没有响应。它也没有显示我的控制台消息。

我有一个网站，其中包含div标签中定义的区块（templatemo_content）。这些div标签包含相同的ID。我想要完成的是遍历网站，找到所有templatemo_content div id并生成每个templatemo_content div块的屏幕截图。

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

page.open('myWebpage', function() {

page.onConsoleMessage = function (msg) { console.log(msg); };
  page.viewportSize = { width:1100, height:800 };
  console.log('open');

  window.setTimeout(function() { 
    var clipRects = page.evaluate(function(){
        return = document.querySelectorAll('#templatemo_content');//.getBoundingClientRect();
    });
    console.log('clipRect size = ' + clipRects.length);
    for(var i = 0; i < clipRects.length; ++i) {
        if (clipRects[i]) {
            console.log('element found');
            var clipRect = clipRects[i].getBoundingClientRect();
            page.clipRect = {
                top:    clipRect.top,
                left:   clipRect.left,
                width:  clipRect.width,
                height: clipRect.height
            };
            page.render('google.png');
        }
    }
    phantom.exit();
  }, 3000); // Change timeout as required to allow sufficient time   
});

同样，这不是来自控制台的日志。如果我删除for循环并将querySelectorAll更改为querySelector，则它适用于其中一个div标记。

任何帮助都会很棒。

Answer 1

答案很晚，但是：问题是您在getBoundingClientRect之外调用了page.evaluate - 方法。当超出该上下文时 - 呈现的DOM - getBoundingClientRect将不会返回任何有用的内容。解决方案：

var clipRects = page.evaluate(function(){
    var rects = [];
    var elements = document.querySelectorAll('#templatemo_content')
    for (var i = 0; i < elements.length; ++i) {
       rects.push(elements[i].getBoundingClientRect());
    }
    return rects;
});

这将在正确的上下文中运行getBoundingClientRect，并且它将返回您将能够使用的DOMRect数组。也许是这样的：

for(var i = 0; i < clipRects.length; ++i) {
   page.clipRect = clipRects[i];
   page.render('image' + i + '.png');
}

循环使用元素id以使用PhantomJS生成屏幕截图

1 个答案: