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

        });

网址在评论栏中给出。现在发生了什么，我总是用卷轴获得修剪过的图像。但是当我直接点击网址时，没有滚动的迹象。有没有办法让卷轴免费未修剪图像。我尝试过使用视图端口设置功能，但是我也尝试使用不能正常工作的clipRect属性。

Answer 1

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

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

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

（或更高，取决于您的要求）

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

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

使用幻影js从jsfiddle捕获屏幕截图

1 个答案: