Question

最近我被要求制作一个Discord机器人来从http://www.futbin.com/

获取玩家硬币值

一旦完成，我被问到是否还可以包含卡片图片：http://www.futbin.com/17/player/15230/Hazard

检查卡片我发现它不仅仅是一张图片，它实际上是根据所有部分组合而成的，这使得它变得更加困难，所以我研究了从特定元素创建截图。

据说Phantomjs是这样做的，所以我开始编写一些代码来测试它：

var page = new WebPage(); 
    page.open('http://www.futbin.com/17/player/15230/Hazard', function (status) {
    console.log("Loaded");
    page.render('image.png');
    phantom.exit();
});

我的console.log花了大约15-20秒来运行，这很糟糕。我的Node.js http.request只需不到一秒钟就可以获取整个网页。

第二个问题是Phantomjs不喜欢discord.io库（https://www.npmjs.com/package/discord.io）并在使用phantomjs.exe运行时抛出错误。

我的一个大问题是，使用Node.js获取此卡的图像的最佳方法是什么？如果可能的话，最好不要使用Phantomjs。

Answer 1

您需要一个更完整的浏览器引擎才能正确呈现页面，运行Chrome的Selenium可以很好地实现此目的。

要快速启动Selenium + Chrome服务器，可以使用方便的Docker镜像来启动新容器，如下所示：

docker run -l scraper -d -p 127.0.0.1:4444:4444 selenium/standalone-chrome:latest

一旦启动并运行，您可以使用WebDriverIO节点包（npm install webdriverio）与脚本进行通信，例如：

let WebDriverIO = require('webdriverio');

let browser = WebDriverIO.remote({
  baseUrl: 'http://www.futbin.com',
  host: 'localhost',
  port: 4444,
  waitforTimeout: 10 * 1000,
  logLevel: 'silent',
  desiredCapabilities: {
    browserName: 'chrome',
  }
});

browser
  .init()
  .url('/17/player/15230/Hazard')
  .saveScreenshot('/path/to/screenshot.png');

一旦您运行该脚本，您应该在指定的目录（即/path/to/screenshot.png）中截取屏幕截图。有关功能的完整列表，请参阅API文档 - http://webdriver.io/api.html

最后停止Docker容器（我只是在这里使用标签来快速识别容器）：

docker stop `docker ps --filter label=scraper -q`

这对提取您需要的页面的特定部分没有任何帮助，但也许您可以通过某种图像切片器推送图像（imagemagick？）。

Node.js截图HTML元素

1 个答案: