javascript - 使用 phantom js 从 jsfiddle 截屏

Question

我必须从 jsfiddle.net 捕获生成的图表的屏幕截图以向其他人展示。我正在使用 phantomjs 来达到这个目的。现在这是我正在使用的代码

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);

        });

网址在注释行中给出。现在发生的事情是我总是用滚动条得到 trim 后的图像。但当我直接点击网址时，没有滚动条的迹象。有没有办法获得滚动条免费的未 trim 图像。我尝试过使用 View 端口设置功能，但该功能不起作用，我也尝试使用 ClipRect 属性，但它也不起作用。

Answer 1

PhantomJS 的默认视口(viewport)大小为 400x300。对于大多数使用固定宽度的网站来说，这太小了，这就是为什么会出现滚动条，这就是为什么在使用 Selenium Webdrivers 元素时无法与之交互，因为它们隐藏在 View 之外。
对于其他网站，将显示移动网站(可能基于媒体查询)。

要解决此问题，您应该在打开页面之前将视口(viewport)设置为类似于桌面的内容:

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

(或更高，具体取决于您的要求)

<小时/>

您可以通过在交互模式下运行不带任何参数的 phantomjs 并检索 viewportSize 来检查这一点。

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