使用phantom js从jsfiddle截屏

Screen capture from jsfiddle using phantom js

本文关键字：jsfiddle 截屏 js phantom 使用      更新时间：2023-09-26

我必须从 jsfiddle.net 捕获生成的图表的屏幕截图才能向某人展示。我正在使用幻影js来实现此目的。现在这是我正在使用的代码

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属性，但该功能也不起作用。

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

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

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

（或根据您的要求更高）

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

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