nodejs爬取网页图片
一、思路概述
1、通过node内置的http/https模块获取指定网站html
2、通过第三方cheerio模块提取html中的所有img标签，所以运行前不要忘记
npm install cheerio
3、使用http/https请求所有img标签中的图片地址，并通过node内置的fs模块将返回的图片数据存储到文件系统中
二、源码
本例展示如何爬取w3cschool首页图片
// 用于发送http请求
const https = require('https')
const http = require('http')
// 用于提取网页中的img标签
const cheerio = require('cheerio')
// 用于将http响应中的数据写到文件中
const fs = require('fs')
// 用于获取系统文件分隔符
const path = require('path')
const sep = path.sep
// 用于存储图片和网页的文件夹路径
const imgDir = `${__dirname}${sep}imgs${sep}`
const pageDir = `${__dirname}${sep}pages${sep}`
// https协议名
const HTTPS = 'https:'
// 若文件夹不存在则创建
for (const dir of [imgDir, pageDir]) {
if (!fs.existsSync(dir)) {
console.log('文件夹(%s)不存在,即将为您创建', dir)
fs.mkdirSync(dir)
}
}
// const url = 'http://gee2dan.com/'
const url = 'https://www.w3cschool.cn/'
// 下载中的图片数量
let downloadingCount = 0
downloadImgsOn(url)
// 下载指定网站包含的图片
function downloadImgsOn(url) {
// URL作为options
const options = new URL(url);
// 获取协议
const protocol = options.protocol
// 根据协议选择发送请求的模块
const _http = protocol === HTTPS ? https : http
// 发送请求
const req = _http.request(options, (res) => {
// 用于存储返回的html数据
let htmlData = ''
res.on('data', (chunk) => {
htmlData += chunk.toString('utf8')
})
res.on('end', () => {
// 将html数据存储到文件中,可用于人工校验
const htmlFileName = `${pageDir}result.html`
fs.writeFile(htmlFileName, htmlData, () => {
console.log('页面(%s)读取完毕,已保存至(%s)', url, htmlFileName)
})
// 将html信息转换为类jq对象
const $ = cheerio.load(htmlData)
const imgs = $('img')
// 用于保存需要下载的图片url,去除重复的图片url
const imgUrlSet = new Set()
imgs.each((index, img) => {
// 获取图片url
let imgUrl = img.attribs.src
// 将不完整的图片url转完成完整的图片url
if (imgUrl.startsWith('//')) {
imgUrl = protocol + imgUrl
} else if (imgUrl.startsWith('/')) {
imgUrl = url + imgUrl
}
imgUrlSet.add(imgUrl)
})
console.log('获取图片url共%s个', imgUrlSet.size)
// 下载imgUrlSet中包含的图片s
for (const imgUrl of imgUrlSet) {
downloadImg(imgUrl)
}
})
})
req.on('error', (err) => {
console.error(err)
})
req.end();
}
/**
* 打印当前正在下载的图片数
*/
function printDownloadingCount() {
console.log('当前下载中的图片有%s个', downloadingCount)
}
/**
* 下载指定url对应的图片
* @param {*} imgUrl 目标图片url
* @param {*} maxRetry 下载失败重试次数
* @param {*} timeout 超时时间毫秒数
*/
function downloadImg(imgUrl, maxRetry = 10, timeout = 10000) {
/**
* 用于下载失败后重试
*/
function retry() {
if (maxRetry) {
console.log('(%s)剩余重试次数:%s,即将重试', imgUrl, maxRetry);
downloadImg(imgUrl, maxRetry - 1);
} else {
console.log('(%s)下载彻底失败', imgUrl)
}
}
// URL作为options
const options = new URL(imgUrl);
// 根据协议选择发送请求的模块
const _http = options.protocol === HTTPS ? https : http
// 从url中提取文件名
const matches = imgUrl.match(/(?<=.*\/)[^\/\?]+(?=\?|$)/)
const fileName = matches && matches[0]
// 请求关闭时是否需要重新请求
let retryFlag = false
const req = _http.request(options, (res) => {
console.log('开始下载图片(%s)', imgUrl)
downloadingCount += 1
printDownloadingCount()
// 判断数据是否为图片类型,仅保存图片类型
const contentType = res.headers['content-type']
if (contentType.startsWith('image')) {
// 存储图片数据到内存中
const chunks = []
res.on('data', (chunk) => {
chunks.push(chunk)
})
// req.on('abort') 中相同的操作也可以写在 res.on('aborted') 中
// res.on('aborted', () => {})
res.on('end', () => {
downloadingCount -= 1
printDownloadingCount()
// 若响应正常结束,将内存中的数据写入到文件中
if (res.complete) {
console.log('图片(%s)下载完成', imgUrl)
write(imgDir + fileName, chunks, 0)
} else {
console.log('(%s)下载结束但未完成', imgUrl)
}
})
}
})
req.on('error', (err) => {
console.error(err)
retryFlag = true
})
req.on('abort', () => {
console.log('下载(%s)被中断', imgUrl)
retryFlag = true
})
req.on('close', () => {
if (retryFlag) {
retry()
}
})
// 如果超时则中止当前请求
req.setTimeout(timeout, () => {
console.log('下载(%s)超时', imgUrl)
req.abort()
})
req.end()
}
/**
* 将数据块数组chunks中第index个数据块写入到distFileName对应文件的末尾
* @param {*} distFileName 数据将写入的文件名
* @param {*} chunks 图片数据块数组
* @param {*} index 写入数据块的索引
*/
function write(distFileName, chunks, index) {
if (index === 0) {
var i = 0
// 判断文件是否重名,若重名则重新生成带序号的文件名
let tmpFileName = distFileName
while (fs.existsSync(tmpFileName)) {
tmpFileName = distFileName.replace(new RegExp(`^(.*?)([^${sep}\\.]+)(\\..*|$)`), `$1$2_${i}$3`)
i += 1
}
distFileName = tmpFileName
}
// 获取图片数据块依次写入文件
const chunk = chunks[index]
if (chunk) {
// 异步、递归
fs.appendFile(distFileName, chunk, () => {
write(distFileName, chunks, index + 1)
})
} else {
console.log('文件(%s)写入完毕', distFileName)
}
}
三、注意事项
1、超时问题
下载图片过程中偶尔会出现某个url长时间不响应的情况，而http/https模块不支持在请求超时时返回或抛出异常，需要我们手动调用request.abort方法来中止请求
应用中可以结合request.setTimeout方法实现请求的超时控制，例如：
const http = require('http')
options = {
// ...
}
const req = http.request(options, (res) => {
// ...
}
req.setTimeout(1000, () => {
req.abort()
})
2、重新请求
下载图片的过程中难免发生异常。对此，我们可以引入重新请求的机制，即在超时、请求异常等情况发生时，再次发起请求，以此提高爬取图片的成功率。
从章节二源码中可以看到，我在事件req.on('abort')和req.on('error')皆执行了retryFlag = true来设置 重传标志位，并在req.on('close')事件中检查 重传标志位 以确定是否要发起重新请求。
那么为什么这样做可以满足重新请求的需求？这要从事件的触发顺序说起。
通过官方文档 / 中文文档可以了解到，事件触发顺序分为以下几种情况：
a 成功请求
成功的请求中，会按以下顺序触发以下事件：
-
'socket' 事件
-
'response' 事件
-
res对象上任意次数的 'data' 事件（如果响应主体为空，则根本不会触发 'data' 事件，例如在大多数重定向中） -
res对象上的 'end' 事件
-
-
'close' 事件
b 连接错误
如果出现连接错误，则触发以下事件：
- 'socket' 事件
- 'error' 事件
- 'close' 事件
c 未连接成功时中止请求
如果在连接成功之前调用 req.abort()，则按以下顺序触发以下事件：
- 'socket' 事件
在这里调用 req.abort()
- 'abort' 事件
- 'error' 事件并带上错误信息 'Error: socket hang up' 和错误码 'ECONNRESET'
- 'close' 事件
d 在响应阶段中止请求
如果在响应被接收之后调用 req.abort()，则按以下顺序触发以下事件：
-
'socket' 事件
-
'response' 事件
-
res对象上任意次数的 'data' 事件
-
在这里调用 req.abort()
- 'abort' 事件
-
res对象上的 'aborted' 事件 - 'close' 事件
-
res对象上的 'end' 事件 -
res对象上的 'close' 事件
除了情况 a 外，情况 bcd 都属于下载失败的情况，需要重新发起请求。
通过观察不难发现，b 区别于 a 的事件有 'error' 事件，c 区别于 a 的事件包括 'abort' 事件和 'error' 事件，而 d 区别于 a 的事件中也包括 'abort' 事件。
所以只要对 req.on('abort')和req.on('error') 这对组合进行处理，就可以覆盖 bcd 三种下载失败的情况。当然，组合的情况不唯一，例如 res.on('aborted')和req.on('error')同样可以满足需求。
3、图片去重与重名处理
a 图片去重
一个html可能包含若干src相同的img标签，可以在提取img的src时进行归一化处理，统一格式后再使用Set去重。去重后可以减少请求数量，提高爬取效率。
b 重名处理
应当考虑存在 尽管src不同，但文件名相同 的情况，若不处理，同名图片在写入时会发生覆盖，引起图片乱码和丢失。所以写入前应当检查是否存在同名文件，若存在同名文件，则在原文件名后增加唯一的序号，再进行写入。以此保证爬取图片的完整性
谢天谢地 node是单线程的
4、文件写入
从章节二可以看到，请求获取的图片数据首先存放在chunks数组中，响应正常结束后才将chunks中的数据写入到文件中。
写入操作分为 同步 和 异步，若采用 同步 方式写入，代码如下
function write(distFileName, chunks) {
// ...
// 获取图片数据块依次写入文件
for (const chunk of chunks) {
fs.appendFileSync(distFileName, chunk)
}
}
章节二中采用的是 异步 方式。若采用类似于 同步 方式的代码 进行异步写入，则无法保证每一个数据块的写入顺序。故本人采用了一套略微曲折的写法，保证了异步写入的有序性
本以为大费周章的采用异步写入，在效率上会优于同步方式。but经过测试，并没有发现同步与异步的明显差别，看来我还是太年轻了
四、运行结果
image.png
完
