下载网页的所有图片资源

思路

1.获取图片的请求地址，保存到列表。

2.遍历列表，下载图片到本地

实现

使用Puppeteer

1.过滤请求，只需要图片的请求

首先我们了解一下Accept字段，表示客户端能够处理的媒体类型，还有优先级，q的值从0到1（默认1）。

那我们只要过滤出image的元素的请求就好了，刚好Puppeteer也提供了API，request.resourceType()，它会返回请求的资源类型。

const puppeteer = require('puppeteer');

var URLList = [];

(async () => {
    const browser = await puppeteer.launch({
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium',
        headless: false
    });
    const page = await browser.newPage();
    const viewConfig = {
        width: 1080,
        height: 1920
    };

    page.on('error', (err) => {
        console.log(err);
    });

    page.on('request', request => {
        if(request.resourceType() === 'image'){//资源类型是image，就把请求地址push进数组
            URLList.push(request.url());
        }
    });
    //设置窗口 
    page.setViewport(viewConfig);
    await page.goto('http://www.senou.net/');//跳转到页面

    console.log(URLList);

})();

于是看到打印结果

2.下载图片

之前有写过保存图片的几种方式

还是使用Puppeteer的截图功能吧，首先获取一下图片名称和类型

const puppeteer = require('puppeteer');

var URLList = [];

(async () => {
    const browser = await puppeteer.launch({
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium',
        headless: false
    });
    const page = await browser.newPage();
    const viewConfig = {
        width: 1080,
        height: 1920
    };

    page.on('error', (err) => {
        console.log(err);
    });

    page.on('request', request => {
        if(request.resourceType() === 'image'){
            URLList.push(request.url());
        }
    });
    //设置窗口 
    page.setViewport(viewConfig);
    await page.goto('http://www.senou.net/');//跳转到页面

    var nameList = URLList.map(item => {
        let name;
        let index = item.indexOf('?');
        if(index>-1){//有拼接查询参数
            let url = item.slice(0,index)
            name = url.slice(url.lastIndexOf('/')+1);
        }else{
            name = item.slice(item.lastIndexOf('/')+1);
        }
        return name;
    });
    console.log(nameList);
})();

掐头去尾，拿到了所有图片名称

然后要截图了

const puppeteer = require('puppeteer');

var URLList = [];

(async () => {
    const browser = await puppeteer.launch({
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium',
        headless: false
    });
    const page = await browser.newPage();
    const viewConfig = {
        width: 1080,
        height: 1920
    };

    page.on('error', (err) => {
        console.log(err);
    });

    page.on('request', request => {
        if (request.resourceType() === 'image') {
            URLList.push(request.url());
        }
    });
    //设置窗口 
    page.setViewport(viewConfig);
    await page.goto('http://www.senou.net/');//跳转到页面

    //获取图片名称
    var nameList = URLList.map(item => {
        let name;
        let index = item.indexOf('?');
        if (index > -1) {//有拼接查询参数
            let url = item.slice(0, index);
            name = url.slice(url.lastIndexOf('/') + 1);
        } else {
            name = item.slice(item.lastIndexOf('/') + 1);
        }
        return name;
    });

    //遍历图片地址，截取图片，保存到images路径下
    var reg = /\.gif/;
    const len = URLList.length;
    for (var i = 0; i < len; i++) {
        if (!reg.test(URLList[i])) {
            await page.goto(URLList[i]);
            const img = await page.$('img');
            if (img) {
                const boundingBox = await img.boundingBox();
                await page.screenshot({ path: './images/' + nameList[i], clip: boundingBox });
            } else {
                await page.screenshot({ path: './images/' + nameList[i] });
            }
        }
    }
    await browser.close();
})();

过程大概是这样，就是一个疯狂截图的过程，然后就拿到了所有的图片

接着开始学习CSS3了。