b站首页banner上的blob链接揭秘
你有时候可能注意到B站首页顶部Banner上会显示一个类似这样的链接："blob:https://xxx"。与直接访问该链接不同，它会指向Banner展示的实际图片或视频。那么，如何制作和下载这种类型的链接呢？
制作方式
要制作Blob链接，需要使用 URL.createObjectURL 接口。具体步骤如下：
// 通过HTML的file控件获取文件
const file = document.querySelector('input[type="file"]').files[0];
// 使用FileReader读取文件
const reader = new FileReader();
reader.onload = (e) => {
// 使用createObjectURL创建Blob URL
const blobUrl = URL.createObjectURL(new Blob([e.target.result]));
};
reader.readAsDataURL(file);下载方式
下载Blob链接下的内容，可以使用下面这个方法：
fetch(blobUrl)
.then((resp) => resp.blob())
.then((blob) => {
// 创建下载链接
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = '图片名称';
// 模拟用户点击下载
a.click();
// 撤销Blob URL，释放相关内存
URL.revokeObjectURL(a.href);
}); 
