2

I'm creating a website screenshot using PhantomJS 1.9.8 experiencing the problem, that the created PNG is much higher than the actual website as seen in the screenshot. There is a not yet ended discussion about PhantomJS not respecting viewport size here: https://github.com/ariya/phantomjs/issues/10619

But i think in my case it's more or less a problem with font size and/or type as you can notice also in the image.

Maybe somebody was facing the same problem and could provide a possible 'workaround' for that, as i need the screenshot to have the identical size as the website itself.

enter image description here

The following HTML is used for the page:

<!DOCTYPE html>
<html>
    <head>
        <title>WSST</title>
        <script src="js/test.js"></script>
    </head>
    <body style = "background-color: #FFFFFF">
        <span class = "hey">Page Start</span>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    Page End
    </body>
</html>

This is the JS file passed to PhantomJS:

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

var width = args[3];
var height = args[4];

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


page.open(args[1], function(status) {

    console.log('phantomjs: width ' + width + ' height ' + height);
    console.log("Status: " + status);
    if(status === "success") {
        page.render(args[2] + '.png');
    }
    phantom.exit();

});

Explanation of the Arguments:

  1. URL of the website
  2. filename of the rendered image
  3. width of the user's viewport
  4. height of the user's viewport

3 and 4 are actually calculated by the javascript file 'test.js' that is loaded with the HTML in the following way as suggested here How to get height of entire document with JavaScript?

var body = document.body,
                html = document.documentElement;

            var height = Math.max( body.scrollHeight, body.offsetHeight,
                html.clientHeight, html.scrollHeight, html.offsetHeight );
            var width = Math.max( body.scrollWidth, body.offsetWidth,
                html.clientWidth, html.clientWidth, html.offsetWidth );

Any help with this would be much appreciated.

Community
  • 1
  • 1
  • Have you tried adding a reset.css stylesheet? – Artjom B. Oct 28 '15 at 21:23
  • I just tried with this https://code.google.com/p/phantomjs/source/browse/website/reset.css?r=cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1 That changed the layout of the page in my local browser but the phantomjs picture stays exactly the same. –  Oct 28 '15 at 21:30

1 Answers1

1

After playing around with CSS stylesheets, i found out that this issue is solved by using fixed font-sizes for all elements on my page.

Obviously this issue is caused by PhantomJS / WebKit relying on 'it's own' font-sizes when they are not defined explicitly.