Google字体无法在PhantomJS中呈现

我正在使用PhantomJS来捕获网页。该页面包含谷歌字体API的字体。当我渲染页面时，字体不会呈现并返回默认值。Google字体无法在PhantomJS中呈现

PhantomJS版本：2.0
平台：视窗

香港专业教育学院添加我使用的代码：

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

来源

2015-09-06 Roey Zada

试过等一会儿，直到字体加载？ –

是的，超过10秒。但没有好的 –

你的代码相当复杂。你有没有尝试过逐件减少，直到问题不再发生？即使你有1.5秒的初始延迟，你以后的检查（如果页面需要更长时间加载）每秒100次，并在页面加载后立即拍摄图像（这将不会给字体留下时间）。你最好等待页面完全加载 - 有各种技巧用于等待字体加载。此外，您应该考虑innerHTML从未“加载”的情况，即您应该有最长超时时间。 – Dave

我无法重现你的问题。字体通常在页面加载完成后加载，因此您需要等到加载字体并重新渲染页面之后才能截取屏幕截图。我不知道什么时候字体加载并应用了潜在的触发事件，但我的网页上试验表明，等待1.5秒是足以与PhantomJS 2.0.0：

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

来源

2015-09-06 11:14:17

嘿，由于某种原因，当我用你的例子。有效！ ..但是当我在我的代码中使用它时，我没有。 ive将我的代码添加到问题中。你能告诉我我在那里做错了吗？ –

它不会触发，因为它会检查'是否（ps ==“已加载”）'未设置为仅在加载每张图片后才启动页面加载。在这个例子中，我没有任何图片，这就是为什么它加载速度快。 –

我现在看到了，但是您没有提供足够的信息来诊断您的问题。 PhantomJS脚本显然是不够的。这似乎是您的页面（JavaScript/CSS /媒体查询）的问题。请阅读[我的网站或项目中的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackoverflow.com/q/254428） –

Google字体无法在PhantomJS中呈现

回答

相关问题