使用 PhantomJS 循环遍历元素 ID 生成屏幕截图

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

真的很晚才回答，但是：问题是您在 page.evaluate 之外调用了 getBoundingClientRect 方法。当离开那个上下文时——呈现的 DOM - getBoundingClientRect 将不会 return 任何有用的东西。解决方案：

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 同时仍在正确的上下文中，并且它将 return 一个 DOMRect 的数组，您将能够使用.也许是这样的：

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

使用 PhantomJS 循环遍历元素 ID 生成屏幕截图

Looping through element id's to generate screenshots with PhantomJS

javascript

selectors-api

phantomjs