# 使用nodejs抓取页面图片实战

**Repository Path**: melissayan/node-get-img

## Basic Information

- **Project Name**: 使用nodejs抓取页面图片实战
- **Description**: 使用nodejs抓取页面图片实战
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-08-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

实例目录如下
![微信截图_20190812151557.png](https://upload-images.jianshu.io/upload_images/11757303-a7964421b124ed26.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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
```