1

我正在尝试使用取决于 phantomjs的node-weshot创建我的网站的图像快照。它在我的本地机器上按预期工作，但是当我将它部署在实时服务器上时。它只是不断触发回调，说图像已生成。但在下面，该过程仍在生成图像。(ie) 文件名已生成，但没有大小和内容。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});
  });

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

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

有解决问题的方法吗？我可以看到这与您如何截取 angularjs 应用程序的屏幕截图有关？

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

4

1 回答 1

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>

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

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

编辑：所以有两件事——首先，重新阅读了这个问题，这更多地与字体而不是图像有关（这意味着可能与使用 node-webshot 捕获网页图像的一些问题重复）。其次，事实证明我的 webshot 设置由于捕捉时间而无法正常工作的原因是幻像级别的 SSL 问题（PhantomJS 无法打开 HTTPS 站点）。

我觉得过去几天我一直在叫错树，但是终于弄清了事情的真相感觉很好。我在这次磨难中学到的一个教训（在许多教训中）是，您在使用 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();
});
于 2014-10-23T15:05:26.617 回答