Blob URL 是什么?

Posted 前端精髓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
      var link = document.createElement("a");
      link.innerhtml = '下载'
      link.download = '图片'
      link.href = url
      document.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 是什么?的主要内容,如果未能解决你的问题,请参考以下文章

URLs对象 blob URL

Blob URL 是什么?

Blob URL 是什么?

java.net.URL 读取流到字节 []

HTML5 视频:使用 Blob URL 的流式视频

将图像从 url 直接上传到数据库 blob 字段