然后使用node.js和phantom将快照HTML页面转换为图像

我正在尝试创建我的网站的图像快照，它依赖于phantomjs。它在我的本地机器上按预期工作，但当我将其部署到实时服务器上时。它只是不断地发出回调，说图像已生成。但在下面，这个过程仍然在生成图像。（即）文件名已生成，但没有大小和内容。10分钟后，文件将填充图像数据。但是字体没有正确呈现

以下是截图：

这是我的webshot代码：

var options = {
  screenSize: {
   width: 403,
   height: 403
  },
  shotSize: {
    width: 403,
   height: 403
  },
  script: function() {
    $(function() {
      window.callPhantom('takeShot');
    });
  },
  takeShotOnCallback: true
};

webshot(baseUrl+frame_url, path, options, function(err) {
    if(err){
      return res.json({ok:false, error:err.error || err});
    }
    return res.json({image:baseUrl+img,ok:true});
  });

从技术上讲，我这里有两个问题：

即使图像生成尚未完成，Webshot也会返回回调

生成的图像无法正确呈现字体。（我在这里使用谷歌字体）

有没有办法解决这个问题？我可以看出这与

---

或者有什么好的替代节点webshot和phantomjs的方法吗？

我自己对webshot和phantomjs很陌生，但你似乎在那里提供了一个匿名函数，不管你的图像是否生成，它都会尽快执行。如果要在调用window.callPhantom之前等待加载所有图像，可以尝试以下操作

script: function() {
    window.onload = function() {
        if (window.callPhantom === 'function') {
            window.callPhantom('takeShot');
        }
    };
},

只有在加载页面上的所有资产后，才会调用window.onload。它可能在本地计算机上运行良好，因为在调用匿名函数之前，加载资产的速度要快得多

编辑：我自己尝试过这个（和其他类似的事情）：它不起作用。我还尝试将callPhantom代码放在客户端：

<script>
    window.onload = function() {
        if (typeof(window.callPhantom) === 'function') {
            window.callPhantom('takeShot');
        }
    };
</script>

---

我认为web字体的加载状态不会触发

$。加载（func）

，这与OP执行的

$（func）

相同。是的，我仍在努力让逻辑正常工作。总体而言，这种方法要么不可靠，要么过于繁琐，难以实现。在您编写的编辑摘要中，您认为jQuery不能很好地与webshot配合使用。你能在你的文章中对此进行进一步的阐述吗？我曾经有过这样的案例（也发现了其他人的陈述），webshot拍摄的内容没有包含jQuery代码的结果。尽管我认为webshot很可能是在所有JS代码执行之前（无论是否为jQuery）就开始抓拍的，但我希望尽可能减少不确定性。

var page = require('webpage').create(),
    url = 'http://some.url.you.want.to.test';

page.onResourceRequested = function(request) {
  console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
  console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
page.onResourceError = function(resourceError) {
  console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
  console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
};
page.open(url, function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        console.log(status);
    }
    phantom.exit();
});