Blob URL 是什么？

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

下面的示例是使用对象URL显示图片。

<body><input type="file" id="input" onchange="handleFiles(this.files)"><script>function handleFiles (files) {let url = URL.createObjectURL(files[0])let img = new Image()console.log(img, 'ok')img.src = url // src="blob:http://192.168.124.4:8080/47f4ba70-c096-4def-bfa4-535709c67847"var link = document.createElement("a");link.innerHTML = '下载'link.download = '图片'link.href = urldocument.body.appendChild(img)document.body.appendChild(link)}
</script>
</body>

Blob URL和 Data URL有什么区别?

Blob URL 的显示的形式 blob:域名/e61c67e3-df3a-453a-8f41-df740c1f5faf ，dataURL的显示形式 data:image/jpeg;base64,/9j/4AAQ...

Blob URL 的长度通常比较短，但 Data URL 由于直接存储图片 base64 编码后的数据，很长很长。Data-URI 的问题是每个 char 在 JavaScript 中占用两个字节。最重要的是，由于 Base-64 编码增加了 33％。Blob 是纯粹的二进制字节数组，它不像 Data-URI 那样具有任何重要的开销，这使得它们处理速度越来越快。

我可以在服务器上创建自己的Blob网址吗？

答案为否，Blob网址/对象网址只能在浏览器内部制作。可以通过文件读取器 API 创建 Blob 并获取 File 对象，尽管 BLOB 只是意味着 Binary Large 对象并以字节数组的形式存储。客户端可以请求数据以 ArrayBuffer 或 Blob 的形式发送。服务器应该将数据作为纯二进制数据发送。数据库通常也使用Blob来描述二进制对象，实际上我们基本上是在谈论字节数组。

为什么视频网站的视频链接地址是 blob？

生产场景往往是对切片格式的视频 m3u8 地址进行 blob 格式处理，其实并不是为了加密，因为浏览器还是会解析 blob 并去 get 请求对应的 m3u8 地址，使用 blob uri 的好处在于可以在一定程度上干扰爬虫。在早期一般网站资源文件不怎么通过 referer 设置防盗链，当我们拿到视频的地址后可以随意的下载或使用。Blob URL 这个 URL 的生命周期和创建它的窗口中的 document 绑定。

Blob URL 是什么？相关推荐

blob/URL.createObjectURL()/reader.readAsDataURL/文件上传
文章目录 Blob和ArrayBuffer 实战一:上传图片预览实战二:以Blob URL加载网络视频前端实现文件下载(a标签实现文件下载避免直接打开问题) 先说结论方案一 a标签+downl ...
Blob Url下载文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
blob类型url的视频下载问题
blob下载问题的详细描述我想用src url blob:https%3A//www.youtube.com/23aea5c8-9ae2-40dc-9417-e675ea99b386下载视频,但是不 ...
blob html 预览_Blob | HTML 5 API | JavaScript 权威指南
Blob 由学院君创建于5个月前, 最后更新于 5个月前版本号 #1 433 views 0 likes 0 collects Blob 简介 Blob 是对大数据块的不透明引用或句柄,名字来源 ...
blob转file对象_JavaScript Blob 对象解析
Blob是JavaScript内建对象,表示不可变的原始数据的类似文件的对象. blob是表示原始数据的不可变对象,这些数据不一定是javascript原生格式的,文件接口基于Blob,继承Blob功 ...
stream模式不能接受blob文件_一文带你层层解锁文件下载的奥秘
今天带来的主题是关于文件下载,通过本文带你领略文件下载的奥秘.本文会花费你较长的时间阅读,建议先收藏/点赞,然后查看你感兴趣的部分,平时也可以充当当做字典的效果来查询. :) 不整不知道,一整,居然整 ...
Web 开发中 Blob 与 FileAPI 使用简述
本文节选自 Awesome CheatSheet/DOM CheatSheet,主要是对 DOM 操作中常见的 Blob.File API 相关概念进行简要描述. Web 开发中 Blob 与 Fil ...
html canvas blob image 污染源
html canvas 被污染当html中的图片来自于另外一个网站时,canvas被污染,这样,toDataURL和toBlob等函数等都不可以输出了,当canvas被污染的时候怎么做?https: ...
new blob文件设置编码_前端下载文件amp;下载进度
前端最基础的就是 HTML+CSS+Javascript.掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些.前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础 ...

Blob URL 是什么？

Blob URL 是什么？相关推荐

最新文章

热门文章