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);
});