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();
                    });
                });
            }
        });
    });
});

幻像节点没有从page.evaluate函数传递返回值

1 个答案: