如何下载网页上的小姐姐图片

“这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战”

今天水一篇。

对于我们前端来说，学好了DOM之后，在网页上我就可以做很多事情，例如下载某个网页上所有的图片，下载某个网页的部分内容等，只要是网页上出现的内容，我们都可以对此进行分析并下载。

以知乎为例，我们要下载某些小姐姐的图片

一行代码就可以得到所有的图片链接：

copy(Array.from($0.querySelectorAll('figure')).map(figure=>figure.querySelector('img').getAttribute('data-actualsrc')))

以上代码说明：

• $0是当前选中的元素，是chrome提供的一种选中dom的快捷方式，上图中$0就是所有图片的wrapper元素。
• copy是把表达式的输出复制到剪贴板，也是chrome浏览器的语法
• 以上代码的核心逻辑是：选中当前选中dom元素的所有figure元素，然后遍历取得figure元素下面img元素的data-actualsrc属性，因为该属性储存着img标签的图片地址.逻辑之所以这样写，会通过分析知乎的网页结构得到的。

得到了图片链接之后，我们可以写个简单的node脚本去下载所有的文件。

//download-imgage.js
const fs = require('fs');
const axios = require('axios');
const download_image = (url, image_path) =>
  axios({
    url,
    responseType: 'stream',
  }).then(
    response =>
      new Promise((resolve, reject) => {
        response.data
          .pipe(fs.createWriteStream(image_path))
          .on('finish', () => resolve())
          .on('error', e => reject(e));
      }),
  );


(async () => {
    let list=[
        "https://pic3.zhimg.com/v2-b2079f83f24a762c23eba4f4e86aec01_b.jpg",
        "https://pic3.zhimg.com/v2-60c04126ed9aea76d92491c77ee40157_b.jpg",
        "https://pica.zhimg.com/v2-bac7e0fe99cb057fe9526ef27d854ded_b.jpg",
        "https://pic4.zhimg.com/v2-8c581216ac0c635326730d9f512f4400_b.jpg",
    ]
    for(let i=0;i<list.length;i++){
        const link=list[i]
        const path='images/'+link.split('/').pop()
        await download_image(link,path);
    }
 
})();

把复制的链接放到list数组中，node download-imgage.js即可下载所有图片，记得安装axios依赖.

以上Node脚本下载的原理是，使用axios去请求数据，要求返回stream，然后使用node的fs模块写入到文件中。

最后，来个练习，如何下载https://huaban.com/favorite/beauty这里所有的图片，感兴趣的可以试下。