如何使用phantomjs呈现html元素 [英] How to render an html element using phantomjs

问题描述

我想将图像保存在代码中指定的div中。但是使用下面的代码我会得到一些其他部分。这是正确的方法吗？我只是phantomjs的初学者。所以请帮助。

I want to save the image inside the div specified in the code. But using the code below i"m getting some other portion rendered. Is this the correct way to do it? I'm just a beginner in phantomjs. So Please help.

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

推荐答案

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

This might be completely wrong but the link that I provided in my comment does it like this:

更改

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

to：

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

编辑

好的所以我想要想出这个，这里是适合我的代码。我不熟悉phantomjs api使用 querySelector 所以我最终使用 getElementsByClassName 这几乎是一样的。

EDIT

Okay so I wanted to figure this one out and here's the code that works for me. I'm not familiar with the phantomjs api to use querySelector so I ended up using getElementsByClassName which is pretty much the same.

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

这篇关于如何使用phantomjs呈现html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！