使用nodejs抓取页面图片实战

实例目录以下

img-用来存储图片文件 index.js -项目入口 config.js -配置文件 analyze.js 用来存储分析DOM的方法 package.json 包的描述文件

1，初始化程序

进入项目文件夹,输入

npm init -y
复制代码

2，下载第三方模块

npm install request cheerio
复制代码

3，配置网页地址以及图片存放的文件夹

将配置项的内容写入config文件夹中，后期index中引入

//url能够本身替换
const url='https://www.tukuppt.com/yuansu/?plan=10051-4509-1383816'
const path=require('path')
const imgDir=path.join(__dirname,'img')

module.exports.url=url
module.exports.imgDir=imgDir
复制代码

4，解析DOM获得图片地址

假设已经获得DOM结构，将分析DOM部分的代码写入analyze.js文件中，经过cheerio获得每一张图片的地址，最后利用一个回调函数callback发送请求

const cheerio=require('cheerio')

function findImg(dom, callback) {
  let $ = cheerio.load(dom)
  $('img').each(function (i, elem) {
    let imgSrc = $(this).attr('src')
    if(imgSrc){
      callback(imgSrc, i)
    }
    //目标页面有懒加载程序，图片地址先写在data-original当中
    //没有这种状况的能够去掉
    let imgOriginalSrc = $(this).attr('data-original')
    if(imgOriginalSrc){
      callback(imgOriginalSrc, i)
    }
  })
}

module.exports.findImg=findImg

复制代码

5，在入口文件中请求图片地址并保存图片

将config.js和analyze.js文件引入这个模块，利用request模块请求图片地址，获得DOM结构。将DOM结构交给analyze的findImg处理并使用回调函数将图片保存到本地

const request=require('request')
const path=require('path')
const config=require('./config')
const analyze=require('./analyze')
const fs=require('fs')



function start() {
  request(config.url,function (err, res, body) {
    console.log('start');
    if(!err && res){
      console.log('start');
      analyze.findImg(body,downLoad)
    }
  })
}
function downLoad(imgUrl,i) {
  // let ext=imgUrl.split('.').pop();
//这个项目图片默认未png,以及存在//直接引入图片和base64格式图片的问题，根据我的状况也可不作处理
  if(imgUrl && (imgUrl.indexOf('http:')===-1) && (imgUrl.indexOf('data:image')===-1)){
    imgUrl='http:'+imgUrl
  }
  console.log("imgUrl:",imgUrl);
  request(imgUrl).pipe(fs.createWriteStream(path.join(config.imgDir,i+'.'+'png'),{
    'encoding':'utf8'
  }))
  console.log(i)
}

start()
复制代码

6，编辑package.json

配置scripts启动项download

"scripts": {
    "download": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
复制代码

7，运行启动项目

运行一段时间后会在img文件夹下找到保存的图片

yarn download
复制代码

附件，项目地址

gitee.com/melissayan/…