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链接：如何制作和下载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557262.html
微信扫一扫 
支付宝扫一扫 
