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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《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);
  });

今天关于《B站首页Banner的Blob链接：如何制作和下载？ 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！