javascript 如何使用 PhantomJS 渲染页面的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11917042/
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 part of a page with PhantomJS?
提问by Dany Joumaa
I would like to render individual HTML elements into PNGs using Phantom.JS. Does anyone know if this is possible? Also, how would I use Phantom.js to render a page that the user is already looking at?
我想使用 Phantom.JS 将单个 HTML 元素呈现为 PNG。有谁知道这是否可能？另外，我将如何使用 Phantom.js 来呈现用户已经在查看的页面？
回答by jasonlfunk
To only render part of a page you need to set the clipRect attribute for the page and then render it.
要仅呈现页面的一部分，您需要为页面设置 clipRect 属性，然后呈现它。
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
I don't understand the second part of your question. Phantom.js is headless meaning that there is no actual display that a user is looking at.
我不明白你问题的第二部分。Phantom.js 是无头的，这意味着没有用户正在查看的实际显示。
回答by mgrachev
Working example.
工作示例。
var page = require('webpage').create();
page.open('http://google.com', function() {
// being the actual size of the headless browser
page.viewportSize = { width: 1440, height: 900 };
var clipRect = page.evaluate(function(){
return document.querySelector('#hplogo').getBoundingClientRect();
});
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('google.png');
phantom.exit();
});
回答by Silvio Lucena Junior
You can use the CasperJS, another project based on PhantomJS.
您可以使用另一个基于 PhantomJS 的项目 CasperJS。
casper.start('http://www.weather.com/', function() {
this.captureSelector('weather.png', '#wx-main');
});
casper.run();
回答by onlyme
The solution below works for me.
下面的解决方案对我有用。
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
But I notice that this on works only if we are rendering an image not a pdf. To wokaround this for pdf, try this
但我注意到只有当我们渲染图像而不是 pdf 时，这才有效。要为 pdf 解决这个问题，试试这个
page.evaluate(function (element){
$(element).appendTo('body');
$('body > :not(' + element + ')').hide();
}, element);
});
window.setTimeout(function(){
page.render("page.pdf");
},1000);
This links may help: How to hide all elements except one using jquery?
此链接可能会有所帮助： 如何使用 jquery 隐藏除一个元素之外的所有元素？
回答by ZinebM
I had the same need, I tried this and it worked fine for me :
我有同样的需求，我试过这个，对我来说效果很好：
don't forget the http://wwwin the URL
不要忘记http://wwwURL 中的
var page = require('webpage').create();
page.open('YourPageURL', function (status) {
if (status !== 'success') {
console.log('Network Problem');
} else {
var p = page.evaluate(function () {
return document.getElementById('yourDivID').innerHTML
});
console.log(p);
}
phantom.exit();
});
