使用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/…