获取B站和微信小图的 JS 代码

发布于 / 教程 / 0 条评论

下面两段代码可实现获取B站和微信gif

食用方法

使用 Chrome 浏览器打开 B 站任意网址,打开 开发者工具 -> console,粘贴下面的代码回车运行:


((url, delay) => {
    let starTime = new Date().getTime();
    let xhr = new XMLHttpRequest();
    let times = [];
    let style = document.createElement('style');
    style.textContent = 'body { display: flex; flex-wrap: wrap; } div { text-align: center; padding: 0.5rem; margin: 1rem; border: 1px solid #ddd; }';
    document.head.appendChild(style);
    document.body.innerHTML = '';
    xhr.open('GET', url, true);
    xhr.onload = event => {
        if (xhr.status >= 200 && xhr.status < 400) {
            console.debug(`资源已加载,耗时 ${new Date().getTime() - starTime} ms,开始获取...`);
            (loadImg = (i, srcs) => {
                (promise = (src, title, timeStamp) => new Promise(resolve => {
                    let img = new Image();
                    let div = document.createElement('div');
                    let p = document.createElement('p');
                    p.textContent = title;
                    img.src = src;
                    img.alt = title;
                    img.onload = newEvent => {
                        setTimeout(() => {
                            let usedTime = newEvent.timeStamp - timeStamp;
                            usedTime = Math.floor(i > 0 ? usedTime - delay : usedTime);
                            times.push(usedTime);
                            console.info(`第 ${i + 1} 张获取成功,耗时 ${usedTime} ms`, img.src);
                            div.appendChild(img);
                            div.appendChild(p);
                            document.body.appendChild(div);
                            resolve(newEvent.timeStamp);
                        }, delay);
                    };
                    img.onerror = err => {
                        console.warn(`第 ${i + 1} 张获取失败`, img.src);
                        resolve(err.timeStamp);
                    };
                }).then(timeStamp => {
                    if (i === srcs.length - 1) {
                        let min = Math.min.apply(null, times);
                        let max = Math.max.apply(null, times);
                        let avg = (times.reduce((p, c) => Number(p) + Number(c)) / times.length).toFixed(0);
                        console.debug(`图片下载完毕,最快用时 ${min} ms,最慢用时 ${max} ms,平均用时 ${avg} ms`);
                    } else {
                        i += 1;
                        promise(srcs[i].icon, srcs[i].title, timeStamp);
                    }
                }))(srcs[i].icon, srcs[i].title, event.timeStamp);
            })(0, (JSON.parse(xhr.responseText)).fix);
        }
    };
    xhr.send();
})('https://www.bilibili.com/index/index-icon.json', 100);

微信表情包

将这行代码复制到 Chrome 地址栏直接体验:


((url, delay) => {
    let starTime = new Date().getTime();
    let xhr = new XMLHttpRequest();
    let times = [];
    let style = document.createElement('style');
    style.textContent = 'body { background: #fff; } div { display: inline-flex; padding: 0.5rem; } div img { box-shadow: 0 0 5px 0 #8e8e8e; }';
    document.head.appendChild(style);
    document.body.innerHTML = '';
    xhr.open('GET', url, true);
    xhr.onload = event => {
        if (xhr.status >= 200 && xhr.status < 400) { console.debug(`资源已加载,耗时 ${new Date().getTime() - starTime} ms,开始获取...`); (loadImg = (i, srcs) => {
                (promise = (src, timeStamp) => new Promise(resolve => {
                    let img = new Image();
                    let div = document.createElement('div');
                    img.src = src;
                    img.onload = newEvent => {
                        setTimeout(() => {
                            let usedTime = newEvent.timeStamp - timeStamp;
                            usedTime = Math.floor(i > 0 ? usedTime - delay : usedTime);
                            times.push(usedTime);
                            console.info(`第 ${i + 1} 张获取成功,耗时 ${usedTime} ms`, img.src);
                            div.appendChild(img);
                            document.body.appendChild(div);
                            resolve(newEvent.timeStamp);
                        }, delay);
                    };
                    img.onerror = err => {
                        console.warn(`第 ${i + 1} 张获取失败`, img.src);
                        resolve(err.timeStamp);
                    };
                }).then(timeStamp => {
                    if (i === srcs.length - 1) {
                        let min = Math.min.apply(null, times) / 1000;
                        let max = Math.max.apply(null, times) / 1000;
                        let sum = Math.round(times.reduce((p, c) => Number(p) + Number(c))) / 1000;
                        let avg = Math.round(sum / times.length);
                        console.debug(`图片下载完毕,用时 ${sum} s, 最快 ${min} s,最慢 ${max} s,平均 ${avg} s`);
                    } else {
                        i += 1;
                        promise(srcs[i].url, timeStamp);
                    }
                }))(srcs[i].url, event.timeStamp);
            })(0, (JSON.parse(xhr.responseText)));
        }
    };
    xhr.send();
})('https://raw.githubusercontent.com/spacelan/wechat-emoticon/master/emoticons.json', 50);

来源:https://maicong.me/t/202

转载原创文章请注明,转载自: LYLARES'S BLOG » 获取B站和微信小图的 JS 代码

Not Comment Found