如何使用 phantomjs 渲染一个 html 元素答案

【问题标题】：How to render an html element using phantomjs如何使用 phantomjs 渲染一个 html 元素
【发布时间】：2013-09-06 12:13:16
【问题描述】：

我想将图像保存在代码中指定的 div 内。但是使用下面的代码，我正在渲染其他部分。这是正确的方法吗？我只是 phantomjs 的初学者。所以请帮忙。

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

【问题讨论】：

它看起来很精简，快速搜索给你这个 SO 线程：stackoverflow.com/questions/11917042/…
@DanielFigueroa 感谢您的链接。我仍然无法在我的代码中找到错误。
实际上我正在渲染一部分。但从同一页面的其他部分裁剪。

标签： javascript phantomjs

【解决方案1】：

这可能是完全错误的，但我在评论中提供的链接是这样的：

改变

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

到：

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

编辑

好的，所以我想弄清楚这一点，这是适合我的代码。我不熟悉使用 querySelector 的 phantomjs api，所以我最终使用了几乎相同的 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);
    }
});

【讨论】：

现在显示错误。 TypeError: 'null' 不是对象.getBountingClientRect'>
使用 var clipRect = page.evaluate(function () { return document.querySelector(".span7 demo").getBoundingClientRect(); });我正在获取 png 输出。但我没有得到我想要的 div。
是的，我之前的回答只是废话，对此我很抱歉。但我已经为您提供了一个适用于我的示例。
我重用了代码，并在 www.google.com 上尝试提取 div lga。它行不通。有什么想法吗？

【解决方案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(); 
    }
});

【讨论】：

【解决方案3】：

我相信你应该在这里做的是用 JSON.stringify 包围你的返回对象。

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

或者获取div的内容

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

【讨论】：