七牛云测试域名过期

Posted on | In
背景：有一天突然发现七牛云测试域名被回收了，有些图片显示不出来了，图片也不能直接下载，本地还没有备份。于是乎想到的办法就是打开一张张图片链接，手动保存到本地。作为一只程序🐒，这种事情自然是做不出来的，查了一堆资料都觉得麻烦，所以用自己的方式解决问题，当然也有解决方案。
想法：其实想法就是
1.登陆七牛云
2.跳转到对应的页面
3.加载完成的图片列表，并且获取全部图片的名字（因为我只有80张，所以只需要点击一次加载更多，就可以获取全部列表）
4.打开图片完整路径，下载图片到本地

使用puppeteer来解决问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const puppeteer = require('puppeteer');

function timeout(delay) {
    return new Promise(resolve => {
        setTimeout(
            () => {
                resolve()
            }, delay
        )
    })
}

var userInfo = {
    name: '账号',
    pwd: '密码',
    domaiName: '测试域名'
};

(async () => {
    const browser = await puppeteer.launch({
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium',
        headless: false
    });//无头模式默认是true，设置为false
    const page = await browser.newPage();
    const viewConfig = {
        width: 1080,
        height: 1920
    };
    //设置窗口 
    page.setViewport(viewConfig);
    await page.goto('https://portal.qiniu.com/bucket/picture/resource');

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

    //登录
    await page.waitForSelector('#email');
    await page.type('#email', userInfo.name);
    await page.type('#password', userInfo.pwd);
    await page.tap('#login-button');

    //点击左侧 对象存储的按钮
    await page.waitForSelector('.sidebar-item');
    const sidebarList = await page.$$('.sidebar-item');
    await sidebarList[4].tap();

    //点击内容管理
    await page.waitForSelector('.basic-operation>a');
    await timeout(3000);
    const breadcrumbList = await page.$$('.basic-operation>a');
    await breadcrumbList[2].tap();

    //点击加载更多
    await timeout(3000);
    await page.waitForSelector('.text-center>a');
    await page.tap('.text-center>a');

    //获取列表图片名称信息
    await timeout(3000);
    await page.waitForSelector('.file-td');
    let list = await page.$$eval('.file-td', el => {
        let arr = [];
        const len = el.length;
        for(let i=0;i<len;i++){
            arr.push(el[i].textContent);
        }
        return arr;
    });
    console.log(list);
    await browser.close();
})();

这样就拿到了图片的名称的数组了，想到两种方式来下载

1.就使用puppeteer的截图，直接贴全部代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const puppeteer = require('puppeteer');

function timeout(delay) {
    return new Promise(resolve => {
        setTimeout(
            () => {
                resolve()
            }, delay
        )
    })
}

var userInfo = {
    name: '账号',
    pwd: '密码',
    domaiName: '测试域名'
};

(async () => {
    const browser = await puppeteer.launch({
        executablePath: './chrome-mac/Chromium.app/Contents/MacOS/Chromium',
        headless: false
    });//无头模式默认是true，设置为false
    const page = await browser.newPage();
    const viewConfig = {
        width: 1080,
        height: 1920
    };
    //设置窗口 
    page.setViewport(viewConfig);
    await page.goto('https://portal.qiniu.com/bucket/picture/resource');

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

    //登录
    await page.waitForSelector('#email');
    await page.type('#email', userInfo.name);
    await page.type('#password', userInfo.pwd);
    await page.tap('#login-button');

    //点击左侧 对象存储的按钮
    await page.waitForSelector('.sidebar-item');
    const sidebarList = await page.$$('.sidebar-item');
    await sidebarList[4].tap();

    //点击内容管理
    await page.waitForSelector('.basic-operation>a');
    await timeout(3000);
    const breadcrumbList = await page.$$('.basic-operation>a');
    await breadcrumbList[2].tap();

    //点击加载更多
    await timeout(3000);
    await page.waitForSelector('.text-center>a');
    await page.tap('.text-center>a');

    //获取列表图片名称信息
    await timeout(3000);
    await page.waitForSelector('.file-td');
    let list = await page.$$eval('.file-td', el => {
        let arr = [];
        const len = el.length;
        for (let i = 0; i < len; i++) {
            arr.push(el[i].textContent);
        }
        arr.splice(0,1);
        return arr;
    });
    
    //截图
    list = list.map(item=>item.replace(/(^\s*)|(\s*$)/g, ""));
    const len = list.length;
    for (let i = 0; i < len; i++) { 
        await page.goto(userInfo.domaiName+list[i]);
        const img = await page.$('img');
        if(img){
            const boundingBox = await img.boundingBox();
            await page.screenshot({path:'./images/'+list[i],clip: boundingBox});
        }else{
            await page.screenshot({path:'./images/'+list[i]});
        }
    }

    await browser.close();
})();

然鹅，有一些已经链接失效了，差点刚吃进去的老坛酸菜一口吐出来。

点击这里，可以看到效果

2.Node.js
1）安装request
1
$ npm install request
2）实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var fs = require('fs');
var request = require("request");

var list = ["0.png", "1542689394373.jpg", "1542690089176.jpg"];

const doMain = '测试域名';//你的测试域名

function download(name) {
    var src = doMain + name;
    var writeStream = fs.createWriteStream('images/' + name);//图片写入目标路径
    var readStream = request(src);
    readStream.pipe(writeStream);
    readStream.on('end', function () {
        console.log('文件下载成功');
    });
    readStream.on('error', function () {
        console.log("错误信息:" + err)
    })
    writeStream.on("finish", function () {
        console.log("文件写入成功");
        writeStream.end();
    });
}
const len = list.length;

for (let i = 0; i < len; i++) {
    download(list[i]);
}

不过这里下载的图片有点问题，还没想到怎么解决。

3）使用canvas绘制图片，并且转成BLOB对象，再使用a标签进行下载。

一开始想使用a标签的download属性，然而a标签只支持同源的URL。所以才使用这种方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas">

    </canvas>
</body>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext("2d");

    //创建新的图片对象
    var img = new Image();
    //解决跨域图片问题
    img.crossOrigin = "Anonymous";
    //指定图片的URL
    img.src = "http://pi8irywwe.bkt.clouddn.com/0.png";
    //浏览器加载图片完毕后再绘制图片
    img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        //以Canvas画布上的坐标(10,10)为起始点，绘制图像
        ctx.drawImage(img, 10, 10);
        //下载图片
        canvas.toBlob(function (blob) {
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = '0.png';
            link.click();
        });
    };
</script>

</html>

参考资料：a标签