如何使用PhantomJS渲染HTML元素

Question

我想保存代码中指定的 div 内部的图像。但使用下面的代码，我得到了其他部分的渲染结果。这是正确的做法吗？我只是一个初学者，希望得到帮助。

var page = require('webpage').create();

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function    (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {

        var clipRect = page.evaluate(function () { 
        return document.querySelector(".span7 demo").getBoundingClientRect(); });
        page.clipRect = {
            top:    clipRect.top,
            left:   clipRect.left,
            width:  clipRect.width,
            height: clipRect.height
        };



        window.setTimeout(function () {
            page.render('capture.png');
            phantom.exit();
        }, 200);
    }
});

- Serjical Kafka

---

看起来像是这样，快速搜索可以给你这个SO线程： https://dev59.com/gGct5IYBdhLWcg3wqfL9 - Daniel Figueroa

@DanielFigueroa 谢谢你提供的链接。可我还是没能找出代码中的错误。 - Serjical Kafka

实际上，我正在获取一个部分的渲染。但是它被裁剪自同一页的其他部分。 - Serjical Kafka

Answer 1

我不确定是否完全正确，但我在评论中提供的链接是这样做的：

更改

var clipRect = page.evaluate(function () { 
return document.querySelector(".span7 demo").getBoundingClientRect(); });

致：

var clipRect = document.querySelector(".span7 demo").getBoundingClientRect(); });

编辑

好的，所以我想解决这个问题，以下是对我有效的代码。我不熟悉phantomjs api如何使用querySelector，因此最终我使用了getElementsByClassName，它几乎相同。

var page = require('webpage').create();

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function    (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            //Heres the actual difference from your code...
            var bb = page.evaluate(function () { 
                return document.getElementsByClassName("span7 demo")[0].getBoundingClientRect(); 
            });

            page.clipRect = {
                top:    bb.top,
                left:   bb.left,
                width:  bb.width,
                height: bb.height
            };

            page.render('capture.png');
            phantom.exit();
        }, 200);
    }
});

- Daniel Figueroa

---

现在出现了一个错误。TypeError: 'null' is not an object <evaluating 'document.queryselector<".span7 demo">.getBountingClientRect'> - Serjical Kafka

使用 var clipRect = page.evaluate(function () { return document.querySelector(".span7 demo").getBoundingClientRect(); }); 我得到了 PNG 输出。但我没有得到我想要的 div。 - Serjical Kafka

是的，我之前的回答很糟糕，对此我感到抱歉。但是我现在为您提供了一个可以工作的示例。 - Daniel Figueroa

我重复使用了代码，尝试在www.google.com上提取div lga，但它无法工作。有什么想法吗？ - Naveen

Answer 2

你也可以轻松地通过ID捕获元素。只需将getElementsByClassName("classname")[0]替换为document.getElementById('divID')。一个完整的工作示例如下：

var page = require('webpage').create();

page.open("https://www.sejlar.com/maps.html", function (status) {
    if (status !== 'success') {
        console.log('Page not found');
    } 
    else {
        var p = page.evaluate(function () {
            return document.getElementById('map').getBoundingClientRect();
        });

        page.clipRect = {
            top:    p.top,
            left:   p.left,
            width:  p.width,
            height: p.height
        };

        page.render('screenshot.png');
        phantom.exit(); 
    }
});

- Kurt Van den Branden

Answer 3

我认为你应该在这里使用JSON.stringify来包装你的返回对象。

return JSON.stringify(document.getElementsByClassName("span7 demo")[0].getBoundingClientRect();

获取 div 元素的内容。

return JSON.stringify(document.getElementsByClassName("span7 demo")[0].innerHTML); 

- Pfff