3

我正在尝试使用基于 webkit 的 PhantomJS 生成网页的大 png 屏幕截图。我有应用程序生成截图就好了（使用他们的raster.js 示例。）但是，我希望文本更大（而不是 12-16 像素） - 我不关心图像变得颗粒状。我认为我可以简单地缩放/缩放网页，执行以下操作：

document.documentElement.style.webkitTransform = "scale(2.0)";

但这会导致页面内容逃离视口。如果您在 Chrome 中评估该行代码，您可以看到这一点。是否可以在 JavaScript/Phantom.js 中缩放整个网页（复制浏览器的“Ctrl +”功能）？

我当前的 phantom.js 脚本如下所示：

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 1280, height: 1024 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            page.evaluate(function () {
                document.body.style.webkitTransform = "scale(2.0)";
            });
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}
4

2 回答 2

2

尝试

page.zoomFactor=2.0;

无论是否设置原点，webkitTransformCSS 属性都不会做你想做的事。一方面，它不会改变元素的尺寸（即，不会发生重新布局，元素会在其当前边界框内缩放）。

于 2012-10-03T03:31:14.333 回答
0

更新

您忘记设置 CSStransform-origin属性，因此您的内容会向上和一半向下扩展（默认为50% 50%）并且上部会转义。

因此，将其设置为0% 0%仅向下和向右进行转换：

document.body.style.webkitTransformOrigin = "0% 0%";

您还必须设置主体宽度以50%避免它以两倍于您的视口结束：

document.body.style.width = "50%";

旧答案 - 无视

这仅解决垂直对齐

好的，缩放比例上下，但视口只向下延伸。幸运的是，修复很简单：将您的内容向下移动一半高度。

使用它作为你的加倍函数，你会没事的：

page.evaluate(function() {
    var h = $('body').height();
    $('body').css('position', 'relative');
    $('body').css('top', h/2 + 'px');
    $('body').css('-webkit-transform', 'scale(2.0)');
});

无论如何要注意这一点，getBoundingClientRect()并且page.clipRect在处理这种转换时表现得很奇怪。

于 2012-05-11T22:00:57.293 回答