bloburls - 什么是 blob URL 以及为什么使用它？

Question

我在使用 blob 网址时遇到问题。

我在 YouTube 上搜索 video 标签的 src，发现视频 src 如下:

src="blob:https://video_url"

我打开了视频 src 中的 blob URL，但出现错误。我无法打开该链接，但它正在使用 src 标记。这怎么可能？

我有几个问题:

• 什么是blob URL？
• 为什么使用它？
• 我可以在服务器上创建自己的 blob URL 吗？

有关 blob URL 的任何其他详细信息也会很有帮助。

Answer 1

Blob URL(引用 W3C，正式名称)或对象 URL(引用 MDN 和方法名称)与 Blob 一起使用。或 File对象。

I opened the blob URL that was in src of the video, but it gave an error. I can't open the link, but it was working with the src tag. How is this possible?

Blob URL 只能由浏览器内部生成。 URL.createObjectURL()将创建对 Blob 或 File 对象的特殊引用，稍后可以使用 URL.revokeObjectURL() 释放该引用。这些 URL 只能在浏览器的单个实例和同一 session (即页面/文档的生命周期)中本地使用。

What is a blob URL? Why it is used?

Blob URL/Object URL 是一种伪协议(protocol)，允许将 Blob 和文件对象用作图像、二进制数据的下载链接等内容的 URL 源。

例如，您不能传递 Image 对象原始字节数据，因为它不知道如何处理它。例如，它需要通过 URL 加载图像(二进制数据)。这适用于任何需要 URL 作为源的内容。与其上传二进制数据，然后通过 URL 将其返回，不如使用额外的本地步骤来直接访问数据，而无需通过服务器。

它也是 Data-URI 的更好替代方案，Data-URI 是编码为 Base-64 的字符串。 。 Data-URI 的问题是 JavaScript 中每个字符占用两个字节。除此之外，由于 Base-64 编码，还增加了 33%。 Blob 是纯二进制字节数组，不像 Data-URI 那样有任何显着的开销，这使得它们处理起来更快、更小。

Can I make my own blob URL on a server?

不可以，Blob URL/对象 URL 只能在浏览器内部创建。您可以通过文件读取器 API 创建 Blob 并获取文件对象，尽管 BLOB 只是表示二进制大型对象并存储为字节数组。客户端可以请求将数据作为 ArrayBuffer 或 Blob 发送。服务器应将数据作为纯二进制数据发送。数据库也经常使用 Blob 来描述二进制对象，本质上我们基本上讨论的是字节数组。

Any additional details about blob URLs would be helpful as well.

您需要将二进制数据封装为 BLOB 对象，然后使用 URL.createObjectURL() 为其生成本地 URL:

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes