// 获取chart第一天的坐标 const position = await page.evaluate(() => { const $image = document.querySelector('...'); const $area = document.querySelector('...'); const areaRect = $area.getBoundingClientRect(); const imageRect = $image.getBoundingClientRect(); // 滚动到图表可视化区域 window.scrollBy(0, areaRect.top); return { x: imageRect.x, y: 200 }； }); // 移动鼠标，触发tooltip await page.mouse.move(position.x, position.y); await page.waitForSelector('...'); // 获取tooltip信息 const tooltipInfo = await page.evaluate(() => { const $tooltip = document.querySelector('...'); const $title = $tooltip.querySelector('...'); const $value = $tooltip.querySelector('...'); const valueRect = $value.getBoundingClientRect(); const padding = 5; return { title: $title.textContent.split(' ')[0], x: valueRect.x - padding, y: valueRect.y, width: valueRect.width + padding * 2, height: valueRect.height } });
截图
计算数值的坐标，截图并用jimp对裁剪图片。
await page.screenshot({ path: imgPath }); // 对图片进行裁剪，只保留数字部分 const img = await jimp.read(imgPath); await img.crop(tooltipInfo.x, tooltipInfo.y, tooltipInfo.width, tooltipInfo.height); // 将图片放大一些，识别准确率会有提升 await img.scale(5); await img.write(imgPath);
图像识别
这里我们用Tesseract来做图像识别，Tesseracts是Google开源的一款OCR工具，用来识别图片中的文字，并且可以通过训练提高准确率。github上已经有一个简单的node封装： node-tesseract ，需要你先安装Tesseract并设置到环境变量。
Tesseract.process(imgPath, (err, val) => { if (err || val == null) { console.error(':x: 识别失败：' + imgPath); return; } console.log(val);
实际上未经训练的Tesseracts识别起来会有少数几个错误，比如把9开头的数字识别成`3，这里需要通过训练去提升Tesseracts的准确率，如果识别过程出现的问题都是一样的，也可以简单通过正则去修复这些问题。
封装
实现了以上几点后，只需组合起来就可以封装成一个百度指数爬虫node库。当然还有许多优化的方法，比如批量爬取，指定天数爬取等，只要在这个基础上实现都不难了。
const recognition = require('./src/recognition'); const Spider = require('./src/spider'); module.exports = { async run (word, options, puppeteerOptions = { headless: true }) { const spider = new Spider({ imgDir, ...options }, puppeteerOptions); // 抓取数据 await spider.run(word); // 读取抓取到的截图，做图像识别 const wordDir = path.resolve(imgDir, word); const imgNames = fs.readdirSync(wordDir); const result = []; imgNames = imgNames.filter(item => path.extname(item) === '.png'); for (let i = 0; i < imgNames.length; i++) { const imgPath = path.resolve(wordDir, imgNames[i]); const val = await recognition.run(imgPath); result.push(val); } return result; } }
反爬虫
最后，如何抵挡这种爬虫呢，个人认为通过判断鼠标移动轨迹可能是一种方法。当然前端没有100%的反爬虫手段，我们能做的只是给爬虫增加一点难度。