PhantomJS：Webkit-Transform 缩放导致页面流出视口

Question

我正在尝试使用基于 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);
        }
    });
}

Answer 1

尝试一下

page.zoomFactor=2.0;

，无论是否设置原点，webkitTransform CSS 属性都不会执行您想要的操作。一方面，它不会改变元素的尺寸（即，不会发生重新布局，元素会在其当前边界框内缩放）。

Answer 2

更新

您忘记设置 CSS transform-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 在处理此转换时表现得很奇怪。