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

Pre*_*ete 19 phantomjs

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

但是,对于某些固定大小的Web元素,我需要生成的图像与Web元素的大小相匹配.

我有一个这样的页面:

<html>
<body>
    <div id="wrapper" style="width:600px; height:400px;">
       Content goes here...
    </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

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

我知道这个不是一个简单的...想法?

谢谢

Pre*_*ete 23

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

  • 为什么你使用window.settimeout来渲染? (3认同)
  • 对于那些在寻求完美PDF的过程中找到自己的方式的人来说 - clipRect目前只适用于图像(即使它没有在文档中明确说明).提交了一个错误. (2认同)
  • 如果页面显示带有动画的内容等,则需要超时以确保所有元素都可见. (2认同)