我想使用Phantom.JS将单独的HTML元素呈现为PNG。有人知道这是否可能吗?另外,我要如何使用Phantom.js呈现用户已经查看的页面?
我想使用Phantom.JS将单独的HTML元素呈现为PNG。有人知道这是否可能吗?另外,我要如何使用Phantom.js呈现用户已经查看的页面?
要仅呈现页面的一部分,您需要为页面设置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');
我不理解你问题的第二部分。Phantom.js是无界面的,这意味着没有实际的显示供用户查看。
工作示例。
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();
});
casper.start('http://www.weather.com/', function() {
this.captureSelector('weather.png', '#wx-main');
});
casper.run();
var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};
page.render('capture.png');
page.evaluate(function (element){
$(element).appendTo('body');
$('body > :not(' + element + ')').hide();
}, element);
});
window.setTimeout(function(){
page.render("page.pdf");
},1000);
http://www
。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();
});
var clipRect = page.evaluate(function () { return document.querySelector("#someid").getBoundingClientRect(); });
。evaluate()
函数是在页面上下文中执行文档评估。 - unhammer