1

背景

本人于周六早上惊醒于翠花的电话轰炸中...

一大早竟然问这么伤脑筋(愚蠢)的问题

本想赶紧打发了 继续我的回笼觉 没想到...

乐(kou)于(shui)助(zhi)人(liu)的我当然要帮帮助他了!

看到这里的红色感叹号 不禁眉头一皱

打开网站 不出我所料 姹紫嫣红的gif图片差点闪瞎我的钛合金狗眼

几番浏览欣赏后收工大吉

正文开始

所用到的模块

  • http:创建服务、处理流相关
  • fs:操作文件及文件夹(读、写)
  • cheerio:简单粗暴的理解为node界的juquey

先爬来整张网页

为了该文章正常发出 把翠花提供的链接换成站长之家的链接来演示
// 引入所需模块
var http = require('http');
var cheerio = require('cheerio');
var fs = require('fs');
// 定义爬取目标站
var Url = 'http://sc.chinaz.com/tupian/'
http.get(Url, function (res) {
  var htmlDate = '';
  // 获取页面数据
  res.on('data', function (chunk) {
    htmlDate += chunk;
  });
  // 数据获取结束
  res.on('end', function () {
    // 过滤出所需的元素
    filterContent(htmlDate);
  });
}).on('error', function () {
  console.log('获取数据出错!');
});

过滤

分析页面结构 看看哪些是需要的 图片都在#container获取到这个节点

遍历.box 并拿到 a > img 的 srcalt

// 过滤页面信息
function filterContent(htmlDate) {
  if (htmlDate) {
    var $ = cheerio.load(htmlDate);
    // 得到所需内容
    var Content = $('#container');
    // 存放一会抓来的信息
    var ContentData = [];
    Content.find('.box').each(function (item, b) {
      var pic = $(this);
      // 为什么是src2?  src获取不到 打印了一下发现有src2
      var src = formatUrl(pic.find('a').children('img').attr('src2'));
      var name = formatUrl(pic.find('a').children('img').attr('alt'));
      // 把抓来的信息交给download函数去下载
      download(src, name) 
      // 这里也存一份
      ContentData.push({
        src,
        name
      })
    });
    // 存放了抓取的图片信息
    console.log(ContentData)
  } else {
    console.log('html null');
  }
}

抓取链接都带有_s是缩略图 需要一个方法帮来转换
// 或取高清链接
function formatUrl(imgUrl) {
  return imgUrl.replace('_s', '')
}
// 图片下载函数
function download(url, name) {
  http.get(url, function (res) {
    let imgData = '';
    //设置图片编码格式
    res.setEncoding("binary");
    //检测请求的数据
    res.on('data', (chunk) => {
      imgData += chunk;
    })
    res.on('end', () => {
        // 没有文件夹则创建 以防报错
      if (!fs.existsSync('./images')) {
        fs.mkdirSync('./images');
      };
      fs.writeFile(`./images/${name}.jpg`, imgData, 'binary', (error) => {
        if (error) {
          console.log(error);
        } else {
          console.log(`${name}----下载成功!`)
        }
      })
    })
  })
}

成果展示

最后晒出劳动所得


cchao
5 声望0 粉丝