问题 viewportSize似乎不适用于PhantomJS

这个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);
    }

});

1776

2017-11-15 02:47

起源

这里讨论的问题 code.google.com/p/phantomjs/issues/detail?id=619 - Joe Beuckman

答案:

这个有效!! 在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();
});

2017-10-01 14:45

那么小于400x320的viewportSize怎么样？它仍然有效吗？ - Artjom B.

是的它确实..它会给你定义的任何视口大小的图像。虽然它不会调整网页的大小而是产生裁剪的图像 - Ashish Gupta

在这里很晚:-)刚开始使用PhantomJS来自Node并遇到设置视口大小不起作用的问题。这个解决方法保存了一天。 TX！ - James

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

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

在此存储库中有代码可以执行此操作： https://github.com/jbeuckm/Splasher

2018-05-25 04:24

这似乎适用于1.9.7的Mac二进制文件：

page.set('viewportSize', {width: 320, height: 480});

-1

2017-08-17 21:55

@ArtjomB。我添加了版本，Mac二进制1.9.7。 - Adam Lockhart

好吧，在Windows版本的phantomjs（1.9.7）中，这会产生错误。 - Artjom B.

在CasperJS，我处理了这个问题，使用了上面的方法，最终发现一旦我通过设置单个视口选项，这是不必要的（至少对我来说，在CasperJS中） casper.viewport() 方法。

我已在下面发布了我的版本，因此您可以看到它如何与多个网址一起使用。

// Requires node.js and casperjs (npm install casperjs)
var casper   = require('casper').create();
var root_dir = 'screenshots/';
var links    = [];
var root     = 'http://localhost:8001/';
var DEBUG    = false;
var opts     = {top: 0, left: 0, 'width': 1280, 'height': 1024};

function getHrefs() {
    // Taken wholesale from casperjs
    // http://docs.casperjs.org/en/latest/quickstart.html
    var links = document.querySelectorAll('.days li > a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

function captureLinks(links) {
    casper.echo('= SCREEN CAPTURING LINKS ====');
    casper.each(links, function(self, link) {
        var filename = root_dir + link.replace('/index.html', '') + '.png';
        casper.echo('Capturing... ' + filename);

        // Relevant code...
        this.viewport(opts.width, opts.height);


        self.thenOpen(root + link, function() {
            // slight delay for external libraries and init loading
            this.wait(500, function(){
                this.capture(filename, opts);
            });
        });
    });
}

casper.start(root, function() {
    links = links.concat(this.evaluate(getHrefs));
    this.echo('= GETTING LINKS ====');
    if(DEBUG) this.echo(links.join('\n'));
    captureLinks(links);
});

casper.run();

-1

2017-10-05 23:56

问题 viewportSize似乎不适用于PhantomJS

答案:

热门问题