url-to-image呈现我尝试的每个URL,除了我需要的URL

时间:2017-01-12 22:51:35

标签: javascript angularjs node.js web phantomjs

我试图实施显然有用且功能强大的url-to-image module。使用基本的示例脚本,我可以渲染并保存为.png我尝试的任何网站,除了我需要的网站,它使用angular。

我需要点击登录页面之外的内容,但我甚至无法呈现登录页面:http://momentum-leaderboard.herokuapp.com/#/login

有关如何使此模块适用于此URL的任何想法?或者关于另一个工具的想法,以呈现这样的页面图像?

1 个答案:

答案 0 :(得分:1)

PhantomJS就可以解决这个问题。此脚本应足以呈现此登录页面:rasterizeSimple.js

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length != 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };

    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 2000);
        }
    });
}

通过登录屏幕是另一回事。由于PhantomJS是一个Web浏览器,让我们只需打开登录页面,填写表单,按下登录按钮,等待几秒钟,然后重新调用感兴趣的URL,现在作为登录用户。登录表单可以通过不同的方式完成,如果您愿意,可以注入jquery。没有测试第二个脚本,但它应该让你去。

    page.open(address, function (status) {
        if (page.injectJs('jquery-1.11.2.js')) { // Loads from the working dir i think
            if (status !== 'success') {
                console.log('Unable to load the address!');
                phantom.exit(1);
            } else {
                page.evaluate(function() {
                    $('input[name=username]').val('username');
                    $('input[name=password]').val('password123');
                    $('input[name=submit]').click();
                });

                window.setTimeout(function () {
                    page.open(address, function (status) {
                        if (status == 'success') {
                            window.setTimeout(function () {
                                page.render(output);
                                phantom.exit();
                            }, 2000);
                        }
                    });
                }, 2000);
            }
        }
    });