在浏览器端通过JS使用blob下载页面上的所有图片到本地

背景说明：

有一个站点页面上提供了192张图片供人浏览，https://ow365.cn/?i=21143&ssl=1&n=5&furl=XnZULZgaboaqolKW8yxiuW_bo78ozXbiWHH@EXuvOeC_QkhKiwDGK2BMM9m@EbwiQNmolsdEsV0=

尝试在nodejs端本地直接以http形式下载这些图片，但是简单的方式无法下载(下载下来的是一个错误图片提示请刷新)，说明网站的防爬虫机制还是在线的，没仔细研究这个防爬虫机制所以也不知道厉不厉害

虽然http形式下载行不通，但是，在浏览器我打开的页面上，这些图片已经全部加载完了，我还拿不下来？最不济我一张一张右键保存图片都能拿下来

话虽如此，能有简单的方式还是用简单的方式

有印象之前看过blob可以用来做img标签的src，img标签也可以转成blob下载到本地(Blob (javascript.info))

以前没有实操过，这次实操一下，以下是实例

页面结构是所以img标签都在一个id="ctn"的div节点内部

 

使用步骤是：

1，先打开页面不停向下滚动直到无法再滚动，此时这个页面的所有图片才全部完成加载

2，将下面的代码复制到控制台，可以先复制前三个方法，然后再复制调用的方法

3，特别注意最后一个方法调用将会下载全部的图片，这里是190多张，比较坑的地方是我的浏览器设置了每次下载都会询问我保存到什么目录，我特么岂不是要选190多此？所以先把浏览器设置成下载前不询问保存路径直接保存到一个默认路径

 

let saveImg1 = async (img, index) => {

    let canvas = document.createElement('canvas');
    canvas.width = img.clientWidth;
    canvas.height = img.clientHeight;

    let context = canvas.getContext('2d');

    context.drawImage(img, 0, 0);

    let blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpg'));

    let link = document.createElement('a');
    link.download = `${index}.jpg`;

    console.log(index + " downloaded");

    link.href = URL.createObjectURL(blob);
    link.click();

    URL.revokeObjectURL(link.href);

}

let saveAllImg1 = async (imgs) => {
    for (let i = 0; i < imgs.length; i++) {
        await saveImg1(imgs[i], i);
    }
}

let downloadAllImg = async () => {
    let imgs = document.getElementById("ctn").querySelectorAll("img");
    await saveAllImg1(imgs);
}

downloadAllImg();