Question

PhantomJS在将网页捕获到图像文件方面做得非常出色。我正在使用基于rasterize.js的脚本。

但是，对于某些固定大小的网页元素，我需要生成的图像与网页元素的大小相匹配。

e.g。我有一个这样的页面：

<html>
<body>
    <div id="wrapper" style="width:600px; height:400px;">
       Content goes here...
    </div>
</body>
</html>

在这个例子中，我需要它来生成600x400的图像。是一种基于我正在栅格化的页面中的web元素动态获取视口大小的方法。

我知道这个不容易......想法？

由于

Answer 1

哇。毕竟不是那么难。只需将视口设置得非常大并使用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);
    }
});

裁剪PhantomJS屏幕截图大小适合内容

1 个答案: