使用 PhantomJS 的交易视图图表截图

Question

我正在尝试在我的服务器上呈现交易视图图表小部件的屏幕截图，类似于以下内容：

https://jsfiddle.net/exatjd8w/

我对 PhantomJS 不是很熟悉，但是尝试了几种方法在图表加载后对其进行拍照，最后一次尝试使用以下代码：

var page = require('webpage').create();
page.open('https://mywebsite.com/chart', 
    function(status) {

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

        if (status === "success") {
            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
                      console.log('Status: 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')
                       })
                }))
            })
        }
    }
);

不幸的是，由于上面的代码永远运行而没有结果，因此仍然无法正确执行。

有什么想法、建议吗？

提前谢谢你。

Answer 1

PhantomJS 不再维护，并且有几个问题可能导致此问题。 我建议切换到 Puppeteer，它有一个非常好的 API，在后台使用 Google Chrome（无头），并且由 chrome 团队积极维护：

https://github.com/GoogleChrome/puppeteer