blob: URLs

Cú pháp

blob:<origin>/<uuid>

blob:

Scheme của URL.

<origin>

Origin của thực thể đã tạo URL này. Nếu origin của tác giả là opaque, thì phần này phụ thuộc vào cách triển khai.

<uuid>

Một UUID.

Ghi chú sử dụng

Quản lý bộ nhớ

Mỗi lần bạn gọi createObjectURL(), một object URL mới sẽ được tạo ra, ngay cả khi bạn đã tạo một URL cho cùng đối tượng đó trước đó. Mỗi URL trong số này phải được giải phóng bằng cách gọi URL.revokeObjectURL() khi bạn không còn cần chúng nữa. Chừng nào còn một object URL hoạt động, đối tượng nền bên dưới không thể được garbage collection và có thể gây rò rỉ bộ nhớ.

Trình duyệt sẽ tự động giải phóng object URL khi tài liệu được unload; tuy nhiên, để đạt hiệu năng và mức dùng bộ nhớ tối ưu, nếu có thời điểm an toàn để bạn chủ động giải phóng chúng thì nên làm như vậy.

Tuy nhiên, tránh giải phóng object URL quá sớm. Một anti-pattern phổ biến là như sau:

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

Việc revoke blob URL ngay sau khi ảnh được hiển thị sẽ khiến ảnh không còn dùng được cho các tương tác của người dùng, chẳng hạn nhấp chuột phải để lưu ảnh hoặc mở nó trong một tab mới. Với các ứng dụng tồn tại lâu, bạn chỉ nên revoke object URL khi tài nguyên không còn có thể truy cập được bởi người dùng, chẳng hạn khi ảnh đã bị xóa khỏi DOM.

Phân vùng lưu trữ

Việc truy cập tài nguyên thông qua blob URL tuân theo cùng các hạn chế như mọi cơ chế lưu trữ khác, tức là state partitioning. Blob URL có một origin tạo liên kết kèm theo (được lưu ngay trong URL) và chỉ có thể được fetch từ các môi trường có storage key khớp với môi trường tạo ra nó. Các navigations bằng blob URL không chịu hạn chế này, mặc dù trình duyệt có thể áp đặt các biện pháp bảo mật như noopener đối với điều hướng cross-site tới một blob URL.

Dùng object URL cho luồng media

Trong các phiên bản cũ của đặc tả Media Source, việc gắn một stream vào phần tử <video> yêu cầu tạo một object URL cho MediaStream. Điều này hiện không còn cần thiết nữa, và các trình duyệt đang loại bỏ hỗ trợ cho cách làm này.

Fetch với header Range

Blob URL hỗ trợ fetch với header Range để yêu cầu nội dung một phần. Điều này đặc biệt hữu ích khi làm việc với các blob lớn, cho phép bạn chỉ lấy những phần cần thiết của blob thay vì toàn bộ nội dung. Để xem ví dụ, hãy xem fetch một phạm vi từ blob URL.

Ví dụ

Blob URL hợp lệ

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

Tạo blob URL

Trong ví dụ này, trước tiên chúng ta tạo một Blob từ một <canvas>, tạo một blob URL cho nó, rồi cuối cùng gán URL đó cho một phần tử <img>.

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

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Sử dụng tệp từ ứng dụng web
• Sử dụng object URL để hiển thị hình ảnh
• URL.createObjectURL()
• URL.revokeObjectURL()
• Danh sách IANA các URI schemes