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

我正在尝试使用依赖phantomjs的节点weshot来创build我的网站的图像快照。 它在我的本地计算机上按预期工作，但是当我将其部署到活动的服务器上时。 它只是不断发射的图像生成的callback。 但是在这之下，这个过程仍然在生成图像。 （即）文件名被生成，但没有大小和内容。 10分钟后，文件将被填入图像数据。 但是字体没有正确渲染。

这里是截图：

并inheritance我的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}); }); 

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

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

有没有解决这个问题？ 我可以看到这是关于如何截取一个angularjs应用程序的截图？

还是有没有任何好的替代节点网页截图和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> 

也不起作用（但不会中断页面​​）。

我会留在这里，并在这里发表我的发现，即使我最终一起放弃网页截图。

编辑：所以，两件事情 – 首先，重新阅读这个问题，这更多的是与字体而不是图像（也许是一些捕获网页图像，node-webshot的重复 ）。 其次，原因是为什么我的webshot设置不能正常工作，因为捕捉时机，但在幻像级别（ PhantomJS未能打开HTTPS站点 ）的SSL问题。

我觉得过去几天我一直在瞎扯着树，但终于到底是件好事。 我在这个磨难中学到的一个教训是，使用网页截图遇到的任何问题都可能是幻像级的。 下面是我用来查看幻影的networking活动的代码（修改模块中的披萨示例）。 只需将其复制到一个js文件中，然后用幻影（> 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(); });