Question

我正在使用Node.js构建一个小应用程序，它可以制作网页的屏幕截图 - 从上到下，从一侧到另一侧。我希望每次页面更改时都保存一个新图像。

我正在使用名为webshot的第三方库来执行此操作，并且它易于使用。但！我正在捕获的网站使用图像上的延迟加载。这对webshot来说是一个挑战，我所看到的只是网站上的灰色占位符图像。

首先我尝试在页面加载后插入延迟 - 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上。好像有问题：

看起来很复杂，我无法弄清问题是什么。创建一个简单的Image元素并设置它的源代码似乎是不必要的。

所以我的问题是：

谢谢你奥莱

Answer 1

首先，确保安装Cairo - 我建议使用Brew而不是MacPorts。还要确保所有依赖项都是Brew中的Linked，这也是我遇到的麻烦。

因此，最新版本的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，但我无法让它们与最新版本一起正常工作。我也遇到了最新版本的节点画布问题，所以我在package.json中将其设置为1.1.0。

我不确定这是你所面临的问题，但是使用Cairo 1.12.X和节点画布1.1.0对我来说效果非常好。