PhantomJS截图交易视图

Posted 2021-04-09

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

小提琴：

http://jsfiddle.net/exatjd8w/

交易查看图表代码：

<!-- 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在完全加载后截取图表的截图？

感谢您的帮助

答案

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')
       })
    }))
  }
)