根据内容裁剪 PhantomJS 屏幕截图

【问题标题】：Cropping PhantomJS screen capture sized to content根据内容裁剪 PhantomJS 屏幕截图
【发布时间】：2013-02-01 04:54:01
【问题描述】：

PhantomJS 在为我捕获网页到图像文件方面做得很好。我正在使用基于 rasterize.js 的脚本。

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

例如我有一个这样的页面：

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

在本例中，我需要它来生成大小为 600x400 的图像。有没有一种方法可以根据我正在光栅化的页面中的 Web 元素动态获取视口大小。

我知道这不是一件容易的事...想法？

谢谢

【问题讨论】：

标签： phantomjs

【解决方案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);
    }
});

【讨论】：

致任何在这里寻找完美 PDF 的人 - clipRect 目前仅适用于图像（即使文档中没有明确说明）。提交了一个错误。
为什么要用window.settimeout来渲染？
如果页面显示带有动画等的内容，则需要超时以确保所有元素都可见。