Comment faire PhantomJS inclure des images de fond lors de la capture d'écran de rendu?

Je suis l'aide de PhantomJS pour prendre des captures d'écran d'une page web, avec la page.méthode render() comme détaillé dans https://github.com/ariya/phantomjs/wiki/Screen-Capture .

Il fonctionne bien sauf pour les images de fond, qui parfois apparaître vide. Vous pouvez voir un exemple de problème si vous allez à http://screener.brachium-system.net/ et entrez http://www.bing.com/ que l'URL, il y a un grand espace vide, où l'image d'arrière-plan doit être.

Est-il un moyen de forcer les images d'arrière-plan s'affiche ?

source d'informationauteur mikel

  1. 23

    A bien fonctionné pour moi, en utilisant la valeur par défaut rasterize.js Phantom exemples:

    Si le problème persiste, essayez d'augmenter le délai entre le chargement de la page et le rendu, il est mis à 200ms (ligne 29 dans l'exemple de code):

    page.open(address, function (status) {
    /* irrelevant */
   window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
}

    De mieux comprendre pourquoi elle devrait aider: Phantom demandes de la page et l'affiche pour une image dès qu'elle est entièrement chargée (tous les actifs sont en place et les scripts exécutés). Mais l'image de fond est chargé via le JavaScript et le navigateur n'a aucun moyen de savoir à l'avance qu'il va y avoir plus de demandes d'image. Réglage plus long délai entre le chargement de la page et de prendre la capture d'écran donne le temps de télécharger et d'afficher des images qui ont été demandés à partir d'un script.

  2. 0

    Je suis tombé sur un problème similaire et a découvert que l'utilisation de la page web.onLoadFinished() travaillé dans mon cas:

    //create a page instance
var page = require('webpage').create();
page.viewportSize = {
    width: 800,
    height: 600
};

//create some HTML code with an image in the background
style = 'background:url(file:///var/www/test.svg) no-repeat;';
style += 'background-size: contain;';
style += 'width: 100%; height: 100%;';
page.content = '<html><body style="' + style + '"></body></html>';

//onLoadFinished() will be called when the page finishes the loading
var outImage = '/var/www/test.png';
page.onLoadFinished = function() {
        page.render(outImage);
        phantom.exit();
};