4

I have used different variations and suggestions from almost a dozen of answers in SO, but nothing seems to help solve this problem I'm about to explain below.

There are a few sites, in which phantomjs screenshots look bad, the content is loaded through javascript after page load is finished, hence the screenshots look to have missing contents. I have also posted an issue to the Github issues page of the project, but the answers do not help.

https://github.com/ariya/phantomjs/issues/14341

One of the site in context is https://angular.io/

I have tried taking screenshot on Page Load Finished, after certain delay using setTimeout, and also tried implementing the waitFor method as described here: Implementing waitFor functionality with phantomjs-node

Any thing better than the attached screenshot of the site would be accepted as an answer. To test what I'm talking about, this code can be used: https://github.com/crackjack/bulk-shot/

This code works, but gives only a section, as expected. if you increase the height further, the screenshot doesn't come good.

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

page.viewportSize = {
    width: 1024,
    height: 960
};

// Portion of the page to take a screenshot of
page.clipRect = {
    top: 0,
    left: 0,
    width: 1024,
    height: 960
};

page.open('https://angular.io/', function (status) {
    window.setTimeout(function(){
        page.render('angular.jpg');
        phantom.exit();
    }, 1000);
});

PS: SlimerJS does take the screenshots fine, I feel it is a WebKit v/s Gecko thing here.enter image description here

Community
  • 1
  • 1
openrijal
  • 583
  • 6
  • 22
  • Slimer.js supports ES2015, because Firefox supports it, but PhantomJS doesn't support it, because it is based on an older version of WebKit. I think the Angular2 site uses ES2015, but I haven't seen any of it when I scrolled a bit through the code. – Artjom B. Jun 10 '16 at 07:25
  • it is not that the screenshots always looks like such, if I apply viewPort and same settings for clipRect, it gives me the required screenshot, but that's only a portion of the site because of clipRect. please see this: http://imgur.com/YgKC0QB – openrijal Jun 10 '16 at 09:59
  • Oh, I see so this might be solved by triggering a repaint. – Artjom B. Jun 10 '16 at 10:10
  • @ArtjomB. can you please enlighten me about the repaint thing you mentioned here? I have edited the question to add a snippet of what's working. – openrijal Jun 10 '16 at 10:19
  • I've tried the usual ways to trigger a repaint, but none of them worked. I guess you've found the answer yourself. I can't say why it works, but I can make it better. – Artjom B. Jun 10 '16 at 10:26
  • @ArtjomB. I have not found the answer. What I posted is a snippet that clips a certain section. because I'm not targetting a single website, I would not know the height in advance, and looks like any height greater that 960 gives be back the blank image. – openrijal Jun 10 '16 at 10:26
  • Sorry, I can't help you there. – Artjom B. Jun 10 '16 at 10:39
  • no problem, thanks anyways. :-) – openrijal Jun 10 '16 at 10:40

0 Answers0