blob: URL

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

Blob (或对象) URL，以 blob: 方案为前缀的 URL，能够将 Blob 和 MediaSource 与其他仅设计用于 URL 的 API（如 <img> 元素）集成。Blob URL 也可以用于导航以及触发本地生成数据的下载。它们被设计为不透明标识符（也就是说，你不应该手动编写它们），并且应该使用 URL.createObjectURL() 和 URL.revokeObjectURL() 函数进行管理。

Blob URL 与 data URL 类似，因为它们都允许将内存中的资源表示为 URL；区别在于 data URL 将资源嵌入自身并有严格的大小限制，而 blob URL 需要一个后备的 Blob 或 MediaSource，并且可以表示更大的资源。

语法

url

blob:<origin>/<uuid>

blob: URL 的 scheme。
<源>: 创建此 URL 的创建者的源 (origin)。如果创建者的源是不透明的，那么这部分将由实现定义。
<uuid>: 一个 UUID。

用法说明

内存管理

每次调用 createObjectURL() 时，都会创建一个新的对象 URL，即使你已经为同一个对象创建了一个。这些 URL 都必须在使用完毕后调用 URL.revokeObjectURL() 来释放。只要有一个对象 URL 处于活动状态，底层对象就无法被垃圾回收，并可能导致内存泄漏。

浏览器会在文档卸载时自动释放对象 URL；但是，为了获得最佳性能和内存使用，如果你有可以显式卸载它们的安全时机，你应该这样做。

但是，要避免过早释放对象 URL。一个常见的反模式如下：

const url = URL.createObjectURL(blob);
img.src = url;
img.addEventListener("load", () => {
  URL.revokeObjectURL(url);
});
document.body.appendChild(img);

在图像渲染后立即撤销 blob URL 会使图像无法进行用户交互（例如右键单击保存图像或在新标签页中打开它）。对于长生命周期的应用程序，你应该只在用户不再可以访问资源时（例如，图像已从 DOM 中移除）撤销对象 URL。

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f64

创建 blob URL

在此示例中，我们首先从 <canvas> 创建一个 Blob，为其创建一个 blob URL，最后将该 URL 附加到一个 <img> 元素。

const canvas = document.querySelector("canvas");
canvas.toBlob((blob) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});