CODEWITHSUNDEEP
javascriptnode.jsphantomjsjsfiddle
Sahasrangshu Guha
Sahasrangshu Guha

Reputation: 683

Screen capture from jsfiddle using phantom js

I have to capture a generated chart's screenshot from jsfiddle.net to show someone. I'm using phantomjsfor this purpose. Now here is the code I'm using

page.open(modifiedUrl.url, function() {
            setTimeout(function(){
                  //http://fiddle.jshell.net/fusioncharts/B2t38/show/light/
                  console.log("created " + modifiedUrl.unique_str+".png");
                  page.render(modifiedUrl.unique_str+".png");
                  counter+=1;
                  startRender();    
            }, 30000);

        });

The url is given in the comment line. Now what happening is I'm getting a trimmed image always with a scroller. But when i'm hitting the url directly there is no sign of scroller. Is there any way to get the scroller free untrimmed image. I have tried with view port setting functionality which is not working also I tried using clipRect property which is not also working.

Upvotes: 0

Views: 1068

Answers (1)

Artjom B.
Artjom B.

Reputation: 61892

PhantomJS has a default viewport size of 400x300. For most sites that use fixed widths this is too small which is why a scrollbar appears and this is why when using the Selenium Webdrivers elements cannot be interacted with, because they are hidden out of view.
For other sites the mobile site will be shown (which is probably based on media queries).

To solve this, you should set the viewport to something desktop-like before opening the page:

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

(or higher depending on your requirement)

You can check this by running phantomjs without any arguments in interactive mode and retrieving the viewportSize.

$ phantomjs
phantomjs> var page = require('webpage').create();
undefined
phantomjs> page.viewportSize
{
   "height": 300,
   "width": 400
}

Upvotes: 1

Related Questions