PhantomJS 在为我捕获网页到图像文件方面做得很好。我正在使用基于 rasterize.js 的脚本。
但是，对于某些固定大小的 Web 元素，我需要生成的图像与 Web 元素的大小相匹配。
例如，我有一个这样的页面：
<html>
<body>
<div id="wrapper" style="width:600px; height:400px;">
Content goes here...
</div>
</body>
</html>
在此示例中，我需要它来生成大小为 600x400 的图像。是否有一种方法可以根据我正在光栅化的页面中的 Web 元素动态获取视口大小。
我知道这不是一件容易的事......想法？
谢谢
哇。毕竟没那么难。只需将视口设置得非常大并使用cropRect 函数。多么棒的工具！
rasterize.js 的模组：
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var height = page.evaluate(function(){
return document.getElementById('wrapper').offsetHeight;
});
var width = page.evaluate(function(){
return document.getElementById('wrapper').offsetWidth;
});
console.log('Crop to: '+width+"x"+height);
page.clipRect = { top: 0, left: 0, width: width, height: height };
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});