前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >资源路径与blobUrl互转

资源路径与blobUrl互转

作者头像
阿超
发布2022-09-26 11:22:36
5840
发布2022-09-26 11:22:36
举报
文章被收录于专栏:快乐阿超

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

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

代码语言:javascript
复制
// 生成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
image-20220831214915939

尝试新标签打开,404

image-20220831214939747
image-20220831214939747

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

image-20220831215021043
image-20220831215021043

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

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

用下面的js

代码语言:javascript
复制
// 下载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
image-20220831215733321
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档