Цитирование через идентификаторы элементов для создания скриншотов с помощью PhantomJS

Question

Не уверен, что я делаю неправильно. При запуске этого в PhantomJS он просто зависает без ответа. Он также не показывает мои сообщения консоли.

У меня есть сайт, который имеет секционные блоки, определенные в тегах div (templatemo_content). Эти теги div содержат один и тот же идентификатор. То, что я пытаюсь выполнить, - это пропустить веб-сайт, найти все id id templatemo_content и сгенерировать скриншоты каждого блока 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'); 
}