Comment rendre un élément html en utilisant phantomjs

Je veux enregistrer l'image à l'intérieur de la div spécifié dans le code. Mais en utilisant le code ci-dessous je me débrouille quelque autre partie de rendu. Est-ce la bonne façon de le faire? Je suis juste un débutant dans phantomjs. Donc, s'il vous Plaît aider.

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

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function    (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {

        var clipRect = page.evaluate(function () { 
        return document.querySelector(".span7 demo").getBoundingClientRect(); });
        page.clipRect = {
            top:    clipRect.top,
            left:   clipRect.left,
            width:  clipRect.width,
            height: clipRect.height
        };



        window.setTimeout(function () {
            page.render('capture.png');
            phantom.exit();
        }, 200);
    }
});

source d'informationauteur Serjical Kafka

  1. 12

    Cela pourrait être tout à fait tort, mais le lien que j'ai fourni dans mon commentaire il fait comme ceci:

    Changement

    var clipRect = page.evaluate(function () { 
return document.querySelector(".span7 demo").getBoundingClientRect(); });

    :

    var clipRect = document.querySelector(".span7 demo").getBoundingClientRect(); });

    MODIFIER

    Ok, donc, je voulais celui-ci et voici le code qui fonctionne pour moi. Je ne suis pas familier avec le phantomjs api à utiliser querySelector j'ai donc fini par utiliser getElementsByClassName qui est à peu près la même.

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

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function    (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            //Heres the actual difference from your code...
            var bb = page.evaluate(function () { 
                return document.getElementsByClassName("span7 demo")[0].getBoundingClientRect(); 
            });

            page.clipRect = {
                top:    bb.top,
                left:   bb.left,
                width:  bb.width,
                height: bb.height
            };

            page.render('capture.png');
            phantom.exit();
        }, 200);
    }
});
  2. 1

    Vous pouvez facilement capturer un élément avec un ID de trop. Il suffit de remplacer getElementsByClassName("classname")[0] par document.getElementById('divID'). Un travail complet exemple serait:

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

page.open("https://www.sejlar.com/maps.html", function (status) {
    if (status !== 'success') {
        console.log('Page not found');
    } 
    else {
        var p = page.evaluate(function () {
            return document.getElementById('map').getBoundingClientRect();
        });

        page.clipRect = {
            top:    p.top,
            left:   p.left,
            width:  p.width,
            height: p.height
        };

        page.render('screenshot.png');
        phantom.exit(); 
    }
});
  3. 0

    Je crois que ce que vous devez faire ici est d'entourer votre retour de l'objet JSON.stringify.

    return JSON.stringify(document.getElementsByClassName("span7 demo")[0].getBoundingClientRect();

    ou d'obtenir le contenu de la div 

    return JSON.stringify(document.getElementsByClassName("span7 demo")[0].innerHTML);