javascript 如何使用phantomjs渲染一个html元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18657615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to render an html element using phantomjs
提问by Serjical Kafka
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.
我想将图像保存在代码中指定的 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);
}
});
回答by Daniel Figueroa
This might be completely wrong but the link that I provided in my comment does it like this:
这可能是完全错误的，但我在评论中提供的链接是这样的：
Change
改变
var clipRect = page.evaluate(function () {
return document.querySelector(".span7 demo").getBoundingClientRect(); });
to:
到：
var clipRect = document.querySelector(".span7 demo").getBoundingClientRect(); });
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 querySelectorso I ended up using getElementsByClassNamewhich is pretty much the same.
好的，所以我想弄清楚这一点，这是对我有用的代码。我不熟悉 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);
}
});
回答by Kurt Van den Branden
You can easily capture an element with an ID too. Just replace getElementsByClassName("classname")[0]by document.getElementById('divID'). A full working example would be:
您也可以轻松捕获带有 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();
}
});
回答by Pfff
I believe what you should do here is surround your return-object with JSON.stringify.
我相信你应该在这里做的是用 JSON.stringify 包围你的返回对象。
return JSON.stringify(document.getElementsByClassName("span7 demo")[0].getBoundingClientRect();
or getting the contents of the div
或获取 div 的内容
return JSON.stringify(document.getElementsByClassName("span7 demo")[0].innerHTML);
