Захват скриншота с phantomjs на странице с наложением

Question

Я пытаюсь захватить конкретный div веб-сайта на скриншот, чтобы облегчить какую-то работу ворчания, которую я должен сделать. До сих пор я использую этот код, я нашел на этом же самом месте, что является своего рода рабочий:

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(); 
}); 

Это на самом деле работает, но у меня есть 2 проблемы:

1) Страница имеет оверлей при первом посещении, всплывающее окно, которое появляется на скриншоте. 2) Изображения, видимо, загружены, как они должны быть оказаны (они появляются только при прокрутке на веб-странице)

Итак, наконец, я в конечном итоге с чем-то вроде этого: problem

У меня нет опыта работы с phantomjs , поэтому я понятия не имею, как я могу это исправить. Устранение наложения DIV и некоторая принуждение загружать изображения, прежде чем делать снимок экрана, могут работать, но я не знаю, как его кодировать.

Большое спасибо!

Answer 1

Вы можете программно удалить элементы наложения, установить положение прокрутки страницы в пикселях, подождать несколько секунд для загрузки изображений, а затем сделать снимок экрана.

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); 

});