2

I am taking a screenshot from an webpage of mine with PhantomJS. The code is simply

var page = require('webpage').create();
page.open('Target_Zone_Selection.html', function () {
    page.viewportSize = {width: 1024, height: 800};
    page.render('test.png');
    phantom.exit();
});

Everything work fine, but what I want to do then is to make correspond the screenshot with the actual webpage (as seen on a browser with the accurate viewport size). My ultimate goal is to get the mouse position and make correspond this position on the screenshot.

And there is the problem : the webpage size is different from the rendering from PhantomJS. I've tried several solution, as going through the DOM and take each offset position to find the dimension of the screenshot, but there is always a problem. This method works for the width, but not for the height.

Could someone describe a way to make the webpage and the screenshot correspond ? Thanks a lot !

UPDATE : The problem is spotted : my webpage contains canvas, buttons, text form and some html. The only element which does not give the same size once rendered with PhantomJS is the button... And the rendering of the button differs also between browsers...

Any suggestion to predict the rendered size of a button ?

goodblues
  • 51
  • 5

1 Answers1

0

Are you talking about the viewport tag for Mobile devices? "Desktop" browsers like PhantomJS do not support viewport. You need to look at tools or services which support Mobile browsers (like https://browshot.com/)

Julien
  • 5,729
  • 4
  • 37
  • 60
  • No, I am talking about taking a screenshot from an entire webpage (as seen on a desktop browser, for example) and make this screenshot correspond to the actual webpage dimensions. The goal is to show the mouse position (in the actual webpage) on the screenshot. To do this, I need to make the dimensions correspond. Thank you anyway for the proposition. – goodblues Apr 18 '13 at 21:48