使用node.js的屏幕截图

Question

我正在使用Node.js构建一个小型应用程序，该应用程序可以对网页进行屏幕截图-从上到下，从一侧到另一侧。 每当页面更改时，我想保存一个新图像。

我正在使用一个名为webshot的3rd party库来做到这一点，并且它很容易使用。 但！ 我正在捕获的网站在图像上使用了延迟加载。 对于网络快照而言，这是一个挑战，我所看到的只是网站上的灰色占位符图像。

首先，我尝试在页面加载后插入延迟-webshot为此提供了一个选项。 我将其设置为10秒，但它只能在屏幕截图中获取少量图片...

我想尝试的下一个解决方案是预加载页面上的所有图像。 因此，我导入了cheerio （用于节点的html解析器）并收集了页面上的所有内容，并开始以通常的方式预加载：

var src = image.attr("src");
var img = new Image();
img.src = src;

不幸的是，这不适用于Node.js。 我收到此错误：

“ ReferenceError：未定义图像”

图像可以作为canvas npm模块的一部分获得。 所以我做了npn install canvas 。 但是不幸的是，这显然不那么简单...我发现了关于如何安装其他库的冗长乏味的解释，这些库是为了安装“画布”。 例如：

我正在使用Mac和El Capitan。 似乎有问题：

https://github.com/Automattic/node-canvas/issues/225

似乎很复杂，我无法弄清楚问题出在哪里。 创建一个简单的Image元素并将其设置为要加载的来源似乎很困难。

所以我的问题是：

谢谢
奥莱

Answer 1

首先，请确保已安装Cairo-我建议使用Brew和NOT MacPorts。 还要确保所有依赖项都在Brew中链接了，这也是我遇到的麻烦。

因此，最新版本的Node Canvas和Cairo存在很多问题。 最近，我花了很多时间试图让Node Canvas可以为我正在构建的卡片创建工具工作，以自动在服务器上组合艺术品。

我相信您看到的问题与开罗版本有关。 我写了一篇博客文章，对我遇到的所有问题以及如何解决这些问题作了较长的解释（文章的上半部分）： http : //blog.wakeskaterstudio.com/2015/10/card-creator-automating-card- creation.html

但实际上，您应该尝试的方法是：使用Brew安装Cairo-获取最新版本，并确保您选中Brew以正确安装所有依赖项。

接下来，使用Brew卸载JUST Cairo（但保留所有依赖项），然后从Cairo FTP Releases页面手动安装版本1.12.X。

如果您根本不使用字体，则可以使用最新版本的Cairo，但我无法使它们在最新版本中正常工作。 我也遇到了最新版本的Node Canvas的问题，因此我在package.json中将其硬设置为1.1.0。

我不确定这是否正是您要面对的问题，但是使用Cairo 1.12.X和Node canvas 1.1.0似乎对我来说效果很好。