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