viewportSize似乎不适用于PhantomJS

Question

这个PhantomJS脚本的输出不应该是240x320像素吗？我得到一个大的默认大小的图像.clipRect()似乎呈现正确大小的图像,但我需要页面的响应内容来反映实际的浏览器窗口大小.

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

page.viewportSize = { width: 240, height: 320 };  

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

    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            page.render('default.png');
            phantom.exit();
        }, 200);
    }

});

Answer 1

这个有效!! 在问题的github页面上找到了片段.它强制'body'元素到页面viewportSize:

var width = 1024;
var height = 768;
var webpage = require('webpage');

page = webpage.create();
page.viewportSize = {width: width, height: height};
page.open('http://harness.io', function(status) {
    console.log(status);
    page.evaluate(function(w, h) {
      document.body.style.width = w + "px";
      document.body.style.height = h + "px";
    }, width, height);
    page.clipRect = {top: 0, left: 0, width: width, height: height};                                                                                                                           
    page.render('/tmp/test.png');
    phantom.exit();
});

Answer 2

这是一个已知问题,但我找到了一个解决方法:

1. 将页面加载到您喜欢的任何大小的iframe中.
2. 渲染剪裁到iframe矩形的屏幕截图.

这个存储库中有代码可以执行:https://github.com/jbeuckm/Splasher