B站首页Banner的Blob链接：如何制作和下载？

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);
  });