Question

为了让PhantomJS以不同的视口宽度创建页面的屏幕截图，我想动态调整它。但这不起作用：

var system = require('system');
var page = require('webpage').create();

page.viewportSize = { width: 800, height: 600 };

page.open('http://example.com', function (status) {

    page.render('medium.png');

    page.viewportSize = { width: 630, height: 420 };

    page.render('small.png');

    phantom.exit();
});

使用phantomjs script.js运行时，会生成两个相同的PNG文件medium.png和small.png，每个文件的宽度为800px。预期的行为是medium.png这样，small.png宽度为630px。如何实现这一目标？

PS：This answer对于类似的问题，对我来说会产生错误。此问题the accepted answer也表明我想避免使用相当丑陋的解决方法。

Answer 1

我认为应该可以设置视口大小并再次打开页面：

var system = require('system');
var page = require('webpage').create();

page.viewportSize = { width: 800, height: 600 };

page.open('http://example.com', function (status) {

    page.render('medium.png');


    page.viewportSize = { width: 630, height: 420 };

    page.open('http://example.com', function (status) {

        page.render('small.png');

        phantom.exit();
    });
});

在PhantomJS中动态更改viewportSize

1 个答案: