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

Question

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

这里是截图：

这是我的网络截图代码：

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

所以从技术上讲，我在这里有 2 个问题：

1. 即使图像生成尚未完成，Webshot 也会返回回调。
2. 生成的图像未正确呈现字体。 （我在这里使用 Google 字体）。

有什么办法可以解决这个问题吗？我可以看到这与How do you take a screenshot of an angularjs app?有关

或者有什么好的替代 node-webshot 和 phantomjs 的？

Answer 1

我自己对 webshot 和 phantom 还很陌生，但您似乎在那里提供了一个匿名函数，无论您的图像是否生成，它都会尽快执行。如果您想在调用 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>

ALSO 不起作用（但它不会破坏页面）。

我会坚持这一点并在此处发布我的发现，即使我最终放弃了 webshot。

编辑：所以有两件事——首先，重新阅读这个问题更多地与字体而不是图像有关（意味着可能与Some issues capturing web page image with, node-webshot 重复）。其次，事实证明，我的 webshot 设置由于捕捉时间而无法正常工作，但幻象级别的 SSL 问题 (PhantomJS failing to open HTTPS site)。

我觉得过去几天我一直在找错误的树，但终于弄清了事情的真相感觉很好。我在这次磨难中学到的一个教训（在许多教训中）是，您在使用 webshot 时遇到的任何问题都可能是幻影级别的。下面是我用来查看 phantom 网络活动的代码（修改了模块中的比萨饼示例）。只需将其复制到一个 js 文件中并使用 phantom (> phantom test.js) 运行它

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