资源路径与blobUrl互转

阿超 阿超 | 339 | 2022-08-31

害怕树敌的人永远得不到真正的朋友——哈兹里特

首先是普通资源URL转换为blobUrl

        // 生成blobURL
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://vampireachao.gitee.io/imgs/preview/3356_3.jpg', true);
        xhr.responseType = 'blob';
        xhr.onload = function (e) {
            if (this.status == 200) {
                var blob = this.response;
                console.log(blob);
                // document.getElementById("myImg").src = URL.createObjectURL(blob);
                console.log(URL.createObjectURL(blob))
            }
        };
        xhr.send();

这边执行后,打印出了结果

image-20220831214915939

尝试新标签打开,404

image-20220831214939747

但是我们直接替换img src,成功渲染

image-20220831215021043

如果一开始将图片格式转为webp,能阻挡大部分爬虫了

那么如果遇到blob:开头的blobUrl,怎么下载呢?.

用下面的js

        // 下载blob
        const filename = '3356_3.jpg'
        const blobUrlString = 'blob:https://vampireachao.gitee.io/a4adbbc7-8375-424b-b9c3-0d1ec54b7ced'
        fetch(blobUrlString)
            .then((response) => response.blob())
            .then((blob) => {
                let aLink = document.createElement('a')
                let evt = document.createEvent('HTMLEvents')
                evt.initEvent('click', true, true)
                aLink.download = filename
                aLink.href = URL.createObjectURL(blob)
                aLink.click()
            })

成功下载

image-20220831215733321

文章标签: 前端相关JavaScript
推荐指数:

真诚点赞 诚不我欺~

资源路径与blobUrl互转

点赞 收藏 评论

关于作者

阿超
阿超

​ 我的名字叫阿超 年龄21岁 家在四川省成都市 未婚 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度

等级 LV1

粉丝 3

获赞 7

经验 73