viewportSize semble ne pas fonctionner avec PhantomJS

Ne devrait pas la sortie de cette PhantomJS script 240x320 pixels? Je suis un grand défaut de la taille de l'image. clipRect() semble rendre la taille correcte de l'image, mais j'ai besoin de la réactivité du contenu de la page afin de refléter le navigateur de la taille de la fenêtre.

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

});
Une discussion de la question est ici code.google.com/p/phantomjs/issues/detail?id=619

OriginalL'auteur Joe Beuckman | 2012-11-15

  1. 10

    Cela fonctionne!!
    Trouvé le bout de code sur la page github de la question.Il force le 'corps' élément de la 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();
});
    Qu'en est viewportSize de plus petite que 400x320? Faut-il encore travailler?
    oui, c'est fait..Il donnera à l'image quelle que soit la taille de la fenêtre vous définissez..mais cela n'aura pas redimensionner la page web plutôt produire de l'image recadrée
    Très tard ici 🙂 Juste commencé à l'aide de PhantomJS bof Nœud et a la question où est le réglage de la taille de la fenêtre n'a pas de travail .. Cette solution de contournement a sauvé la journée. tx!

    OriginalL'auteur Ashish Gupta

  2. 5

    C'est un problème connu, mais j'ai trouvé une solution de contournement:

    1. Charger la page dans une iframe de la taille que vous voulez.
    2. Rendre une capture d'écran clipsé sur le rectangle de l'iframe.

    Il y a le code pour le faire dans ce référentiel: https://github.com/jbeuckm/Splasher

    OriginalL'auteur Joe Beuckman

  3. -1

    Cela semble fonctionner dans le binaire Mac pour 1.9.7:

    page.set('viewportSize', {width: 320, height: 480});
    J'ai ajouté la version binaire Mac 1.9.7.
    Ok, dans la version windows de phantomjs (1.9.7) ce qui produit une erreur.

    OriginalL'auteur Adam Lockhart

  4. -1

    Dans CasperJS, j'ai traité de cette question, a utilisé la méthode ci-dessus(s), et, finalement trouvé que c'était inutile (au moins pour moi, dans CasperJS) une fois que j'ai mis l'unique fenêtre des options via le casper.viewport() méthode.

    J'ai posté ma version ci-dessous, de sorte que vous pouvez voir comment cela pourrait fonctionner avec de nombreuses adresses à la fois.

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

    OriginalL'auteur Chris Tabor