Question

我使用PhantomJS捕获网页。该页面包含来自google fonts API的字体。当我渲染页面时，不会渲染字体并返回默认状态。

PhantomJS版本：2.0
平台：Windows

我添加了我使用的代码：

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

var isLoad = false;

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';

page.viewportSize = { width: 1400, height: 569.1588 };

page.open('http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2', function (status) {
setTimeout(function () {
    var ue = page.evaluate(function () {
        return window.navigator.appVersion;
    });
    console.log("status: " + status);
    console.log("ue: " + ue);

    if (status === "success") {

        var timer = setInterval(function () {
            var ps = page.evaluate(function () {
                document.body.bgColor = 'white';
                return document.getElementById("pageStatus").innerHTML;
            });


            if (!isLoad) {
                console.log("wait...");
                if (ps == "loaded") {
                    clearInterval(timer);
                    console.log("proccessing...");
                    console.log("loaded");
                    isLoad = true;
                    page.render('new/exam1.png');
                    phantom.exit();
                }
            }
        }, 10);
    } else {
        console.log('Unable to load the address!');
        phantom.exit(1);
    }
}, 1500);
});

Answer 1

我无法重现你的问题。通常在页面加载完成后加载字体，因此您需要等到字体加载并重新呈现页面，然后才能截取屏幕截图。我不知道在加载和应用字体时可能会触发的事件，但我在页面上的测试表明，使用PhantomJS 2.0.0等待1.5秒就足够了：

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

page.viewportSize = { width: 600, height: 600 };

page.open('http://www.facegift.co.il/canvas/print.aspx?userItemId=27477&Sc=974088&pagenum=3&width=1500&print=2', function(){
    setTimeout(function(){
        page.render("test40.png");
        phantom.exit();
    }, 1500);
});

Google字体无法在PhantomJS中呈现

1 个答案: