PhantomJS 截图交易视图图表答案

【问题标题】：PhantomJS screenshot Trading View ChartPhantomJS 截图交易视图图表
【发布时间】：2019-02-07 00:46:23
【问题描述】：

我正在使用 PhantomJS 渲染 Trading View chart widget 的屏幕截图：

小提琴：

交易查看图表代码：

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_f0339"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"> 
  </script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "Light",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_f0339"
}
  );
  </script>
</div>

PhantomJS：

var page = require('webpage').create();

page.open('https://example.com/chart_test.php', 
    function(status) {

        console.log("Status: " + status);

        if (status === "success") {

page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {

        console.log('Status: ' + status);

        var date = new Date();
        var time = date.getTime();

        $('#main-widget-frame-container iframe').on('load', function() {
            console.log('iframe loaded, now take snapshot');
            page.render('screenshot_' + time + '.png');
            phantom.exit();
        });

    });

}

});

问题是，尽管上面的代码，呈现的屏幕截图显示图表仍在加载。

如何让 PhantomJS 在图表完全加载后对其进行截图？

感谢您的帮助

【问题讨论】：

setTimeout 不起作用，因为图像可能需要更长的时间甚至加载不到两秒。相反，您需要使用 onLoad 处理程序。刚刚做了一个快速的谷歌搜索，这就是你需要的...phantomjs.org/api/webpage/handler/on-load-finished.html 页面加载后，我们还没有完成。使用带有 PhantomJS 的 jQuery 来检查小部件 iframe 是否已完成加载...$('#main-widget-frame-container iframe').on('load', function() { console.log('iframe loaded, now take snapshot'); page.render('screenshot.png'); phantom.exit(); })
@indospace.io 感谢您的回复和帮助！我对在哪里添加 page.onLoadFinished = function(status) 感到困惑，你介意给我看一个上面的幻象代码示例吗？我尝试了一些不同的事情，但没有运气。再次感谢！
你快到了，你必须包括 jQuery。以下是执行此操作的详细信息...http://phantomjs.org/api/webpage/method/include-js.html

标签： javascript phantomjs render webpage-screenshot

【解决方案1】：

var webPage = require('webpage')
var page = webPage.create()
page.open('https://example.com/chart_test.php', 
    function(status) { 
    })
)
page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function() {
    (page.evaluate(function() {
      // jQuery is loaded, now manipulate the DOM
       var date = new Date(),
           time = date.getTime()
       $('#main-widget-frame-container iframe').on('load', function() {
          console.log('iframe loaded, now take snapshot')
          page.render('screenshot_' + time + '.png')
       })
    }))
  }
)

【讨论】：

我没有安装 PhantomJS，试试这个并告诉我。这是非常简单的逻辑，但众所周知，Javascript 可以成为母亲！