javascript - 幻影 Node 不传递 page.evaluate 函数的返回值

Question

我正在尝试提取网页的特定元素，并将其保存为本地镜像。

node.js 代码，使用 phantom-node:

var phantom = require('phantom');

phantom.create().then(function(ph) {

  ph.createPage().then(function(page) {

    page.property('viewportSize', {width: 1600, height: 900});
    page.open('http://stackoverflow.com/questions/37570827/saving-element-of-webpage-as-an-image-using-js').then(function(status) {

        if (status == 'success') {
            page.evaluate(function() {
                return document.getElementById("sidebar").getBoundingClientRect(); 

            }).then(function(rect){
                console.log(rect);
                page.property('clipRect', rect);
                page.render("question2.png"); 
            });   
        }
        page.close();
        ph.exit();
    });
  });
});

console.log(rect) 每次运行时都会打印不同的值。我不明白为什么会出现这种情况，但无论如何，我想我的侧边栏边界矩形的返回语句不起作用。代码有问题吗？

编辑:实际上，经过进一步调试，似乎 rect 被正确返回，但没有被设置为 ClipRect..

Answer 1

问题是 page.render 调用没有足够的时间在 page.close() 发生之前完成。

此代码解决了问题:

var phantom = require('phantom');

phantom.create().then(function(ph) {

    ph.createPage().then(function(page) {

        page.open('http://stackoverflow.com/questions/37570827/saving-element-of-webpage-as-an-image-using-js').then(function(status) {

            if (status == 'success') {
                page.evaluate(function() {
                    return document.getElementById("sidebar").getBoundingClientRect();
                }).then(function(rect){
                    page.property('clipRect', rect);
                    page.render("question.png").then(function(){
                        page.close();
                        ph.exit();
                    });
                });
            }
        });
    });
});