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); });
JavaScript中outerHTML与innerHTML的区别:如何正确地在元素后追加内容?
ThinkPHP5框架下Vue异步组件报错TypeError: $$_IMPORT_STATE is not defined怎么办?
为什么 SCSS 更适合编写 CSS
如何用CSS和HTML实现表格的三种列布局?
如何用CSS弹性布局实现一个始终保持正方形的骰子界面?
在扫码搜索框中限制输入法,确保用户只能使用英文输入法,可以通过以下几种方法实现。这些方法适用于不同的平台和开发环境:1. 前端开发(HTML/JavaScript)如果你是在网页上开发,可以使用JavaScript来检测和限制输入法。以下是一个示例代码: