PhantomJS image captures images of different dimensions despite constant page content

Question

I am trying to use PhantomJS image capture to capture the image of the browser. Each time I run the image capture function, the dimensions of the image is slightly different. Example, once I get 1400x5185, if I open the same url after few hrs, I get 1399x5185 or 1400x5186.

I have tried croping from left top corner, but then pixels are slightly skewed. Note:The content of the page is always constant

How do I always ensure that I get the same dimension of image without copping the pixels?

Answer 1

Something probably changes on the page, otherwise there is no reason for PhantomJS to render different images.

You should check the differences of the images in detail. Ads are probably the culprit when they are not uniformly formatted. If you identified the changing DOM elements, you can use casper.evaluate() to access the DOM and remove/hide those elements before capturing the screenshot.

You could also change the viewport size to 1920x1080 for example using casper.viewport(). If the page is vertically scrolling, then only one of the y-direction might change. If you want to be sure, then change the viewport size to 1400x5187.