SPA 网页图片爬虫实战

2021年4月9日 · 预计阅读时间： 7 分钟

前言

博主编程启蒙在高中，当时听说 python 写爬虫很厉害，于是学了一段时间的 python，但当时对于编程语言中的各种概念一无所知，所以学习起来十分困难，最终只能照着网上的教程抄抄简单的爬虫（特别是对于使用了异步加载的网页一筹莫展），最近在浏览某个网站时发现该网站的图片专栏的页面结构十分统一，由于懒得一个一个帖子点开看，决定写一个爬虫爬到本地。

爬虫

因为之前了解过使用 JS 写爬虫，于是很快就选择了puppeteer这个库来写爬虫。puppeteer是一个无头浏览器，可以不打开浏览器模拟浏览器的各种操作。

puppeteer的 API 基本都是异步的，所以我们需要一个 async 函数包裹，首先来介绍一下puppeteer主要的 API：

puppeteer.launch() 返回一个 browser 实例
browser.newPage() 返回一个新页面当然我推荐使用(await browser.pages())[0] 这样就直接使用当前页面，不用新建页面了
page.goto(url) 页面跳转
page.evaluate(fn) 相当于在这个页面的控制台执行函数，所以不可访问外部的变量，外部也不可以访问里面的变量，最后会返回一个 promise 包裹 return 的结果

写爬虫的工具选择好后，接下来我们来分析一下页面，该网页的图片使用了懒加载，当图片到视窗的时候，src 才会被设置为真实的 url。

所以我们需要模拟滑动到底部的操作

await page.evaluate(async () => {
  await new Promise((resolve, reject) => {
    let totalHeight = 0
    let distance = 100
    const timer = setInterval(() => {
      var scrollHeight = document.body.scrollHeight
      window.scrollBy(0, distance)
      totalHeight += distance
      if (totalHeight >= scrollHeight) {
        clearInterval(timer)
        resolve()
      }
    }, 50)
  })
  return [...document.querySelectorAll('selector')].map(item => item.src)
})

在图片全部加载后，再去获取图片 src

爬取完成之后我们再把数据保存起来

async function mkdir(path, result) {
  fs.mkdir(path, { recursive: true }, err => {
    if (err) console.log(err)
    fs.writeFileSync(
      `./data/${typeName}${START_PAGE}-${END_PAGE}.json`,
      JSON.stringify(result),
      err => {
        if (err) console.log(err)
      }
    )
  })
}

这样我们的小爬虫就写好啦 😄

但当我测试的时候发现了一些问题 😥

由于网站在国外，国内访问时可能超时，puppeteer页面跳转默认超时时间 3000ms，所以我们需要自己设置 page.setDefaultNavigationTimeout(0)，设为 0 则超时时间无限制。

在爬取图片时，有很多的请求是我们不关心的，我们能不能过滤掉这些请求呢？当然可以。puppeteer很贴心的给了我们设置请求过滤器的 API

const blockedResourceTypes = [
  'media',
  'font',
  'texttrack',
  'object',
  'beacon',
  'csp_report',
  'image', // 因为我们只是爬取图片地址，不需要加载出来
]
page.setRequestInterception(true)
page.on('request', async req => {
  // 根据请求类型过滤
  const resourceType = req.resourceType()
  if (blockedResourceTypes.includes(resourceType)) {
    req.abort()
  } else {
    req.continue()
  }
})

没有提示，不知道爬虫执行到哪了，加个进度显示吧

exports.formatProgress = function (
  current,
  total,
  title = '当前进度',
  barLength = 40
) {
  let percent = ((current / total) * 100).toFixed(2)
  let done = Math.floor((current / total) * barLength)
  let left = barLength - done
  let str = `${title}：[${''.padStart(done, '#')}${''.padStart(
    left,
    '-'
  )}]   ${percent}% ${current}/${total}`
  return str
}

是不是很人性化呀

下载图片

爬取到数据之后，就得把图片下载下来了，不然爬它干嘛是吧

怎么下载呢？打开百度，哦不，打开 Google，

很快就查到一个方法，使用request库来请求，fs.createWriteStream来写入

request
  .get({
    url,
  })
  .on('error', function (err) {
    console.log(`request err: ${err} at ${url}`)
  })
  .pipe(
    fs
      .createWriteStream(`${dest}/${folder}/${name}`)
      .on('error', err => {
        console.log(`createWriteStream error: ${err} at ${url}`)
      })
      .on('close', err => {
        if (err) console.log(`createWriteStream close error: ${err} at ${url}`)
      })
  )

看起来很美好，但我们真正使用的时候，还是会发现有很多问题

首先同步下载大量的图片速度太慢了，还有可能遇到too many files的报错，网上也提供了一些解决方法，我最终使用bagpipe来解决问题

const Bagpipe = require('bagpipe')
const bagpipe = new Bagpipe(10)
bagpipe.push(downloadImage, url, dest, item.title, reason => {
  if (reason) console.log(reason)
})

有些图片地址在国内无法正常访问怎么办？挂上代理

request.get({
  url,
  headers: {
    'User-Agent':
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36',
  },
  proxy: 'http://0.0.0.0:1082/', // 需要你自己本地有代理工具
})

异步调用之后，fs.createWriteStream 无法正确创建文件报错，先用fs.writeFile创建一个空的文件

fs.writeFile(`${dest}/${folder}/${name}`, '', err => {
  fs.createWriteStream()
})

创建的目录有非法字符创建失败，可以先用正则过滤一遍

const illegalCharacterReg = /\/|\\|:|\*|\?|"|<|>|\|/g
fs.mkdir(`${dest}/${item.title.replace(illegalCharacterReg, "")}`, { recursive: true }, err => {...})

虽然下载的时候还会遇到一些问题socket hang up，Client network socket disconnected before secure TLS connection was established，但博主的能力暂时无法解决，网上也没有找到十分有效的方法，就先写到这里吧。

前言​

爬虫​

下载图片​

前言

爬虫

下载图片