javascript - PhantomJS 和 Node.js 中出现绑定(bind)错误的空白屏幕截图

Question

我正在尝试截取 earth.nullschool.net 的屏幕截图使用 PhantomJS 和 Node.js。

这是相关代码:

var phantom = require("phantom");
var url = "http://earth.nullschool.net/#current/wind/isobaric/10hPa/orthographic=0.00,0.00,350";
var timeout = 15000;

phantom.create(function(ph) {
    ph.createPage(function(page) {
        page.open(url, function(status) {
            setTimeout(function() {
                page.render("earth_0-0-350_#current.png", function(finished) {
                    ph.exit();
                });
            }, timeout);
        });
    });
});

我最初将 timeout 变量设置为 5 秒。这会返回一张未渲染 map 的空白图像。

我想我需要更长的超时时间才能让页面完全加载。所以我逐渐将超时时间延长到一整分钟。但是输出是一样的。 map 从不呈现。

在注册事件处理程序(onConsoleMessage、onError、onResourceError、onResourceTimeout)后，我发现了以下错误:

ERROR: TypeError: 'undefined' is not a function (evaluating 'i.bind(null,t,n)')
TRACE:
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 84
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 85
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 85
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 7 (in function "a")
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 7
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 84 (in function "n")
 -> http://earth.nullschool.net/js/bundle.min.js?v20150923: 64

Answer 1

PhantomJS 1.x 有一个相当老旧的引擎，不支持一些基本的网络标准。其中包括不支持的 Function.prototype.bind。 This shim这几乎适用于所有情况。

由于您通常希望尽快启用它，因此您必须从 page.onInitialized 运行填充程序事件监听器。 phantomjs-node 中的调用与普通 PhantomJS 中的调用略有不同:

phantom.create(function (ph) {
    ph.createPage(function (page) {
        page.set('onInitialized', function(success) {
            page.evaluate(function(){
                var isFunction = function(o) {
                  return typeof o == 'function';
                };

                var bind,
                  slice = [].slice,
                  proto = Function.prototype,
                  featureMap;

                featureMap = {
                  'function-bind': 'bind'
                };

                function has(feature) {
                  var prop = featureMap[feature];
                  return isFunction(proto[prop]);
                }

                // check for missing features
                if (!has('function-bind')) {
                  // adapted from Mozilla Developer Network example at
                  // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
                  bind = function bind(obj) {
                    var args = slice.call(arguments, 1),
                      self = this,
                      nop = function() {
                      },
                      bound = function() {
                        return self.apply(this instanceof nop ? this : (obj || {}), args.concat(slice.call(arguments)));
                      };
                    nop.prototype = this.prototype || {}; // Firefox cries sometimes if prototype is undefined
                    bound.prototype = new nop();
                    return bound;
                  };
                  proto.bind = bind;
                }
            });
        });

        /* remaining script */
        setTimeout(function() {
            page.render("earth_0-0-350_#current.png", function(finished) {
                ph.exit();
            });
        }, timeout);
    });
});

这是根据我的回答调整的here .