viewportSize似乎不能与PhantomJS一起工作[英] viewportSize seems not to work with PhantomJS

本文是小编为大家收集整理的关于viewportSize似乎不能与PhantomJS一起工作的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

该phantomjs脚本的输出不应该是240x320像素吗?我得到了一个大型默认尺寸的图像.夹克()似乎可以呈现正确的尺寸图像,但是我需要页面的响应内容来反映实际的浏览器窗口大小.

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

});

推荐答案

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

  1. 将页面加载到您喜欢的任何尺寸的iframe中.
  2. 将屏幕截图夹在iframe的矩形上.

在此存储库中有代码要做: https://github.com/jbeuck.com/jbeuckm/splasher/splasher

其他推荐答案

这有效! 在问题的GitHub页面上找到了片段./p>

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();
});

其他推荐答案

这似乎在Mac二进制中起作用1.9.7:

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

本文地址:https://www.itbaoku.cn/post/1739873.html

问题描述

Shouldn't the output from this PhantomJS script be 240x320 pixels? I'm getting a large, default-sized image. clipRect() would seem to render the correct size image, but I need the responsive content of the page to reflect the actual browser window size.

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

});

推荐答案

This is a known issue but I found a workaround:

  1. Load the page into an iframe of whatever size you like.
  2. Render a screenshot clipped to the rectangle of the iframe.

There is code to do it in this repository: https://github.com/jbeuckm/Splasher

其他推荐答案

This works!! Found the snippet on the github page of the issue.It forces the 'body' element to the page 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();
});

其他推荐答案

This seems to work in the Mac binary for 1.9.7:

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