Blob URL DataURL

前端不加班

于 2022-07-21 16:03:38 发布

阅读量262

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_49515138/article/details/125914482

版权

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>
//封装
export function blobUrlToDataURL (blob, cb) {
  var a = new FileReader()
  a.readAsDataURL(blob)// 读取文件保存在result中
  a.onload = function (e) {
    var getRes = e.target.result// 读取的结果在result中
    cb && cb(getRes)
  }
}

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 绑定。