什么是 Blob 和 blob: URL-CSDN博客

本文链接：https://blog.csdn.net/AngelCryToo/article/details/147121447

在网页开发中，您可能会遇到类似 <img src="blob:http://localhost:5100/158db3da-850b-4303-9d5c-d1dd0446a297"> 的代码片段。这里的 blob: URL 是浏览器为表示内存中的 Blob（Binary Large Object）或 File 对象而生成的临时 URL。这种机制允许开发者在不将数据上传到服务器的情况下，直接在网页上引用和操作本地或动态生成的数据。

什么是 `Blob` 和 `blob:` URL？

Blob 对象：Blob 是一个表示不可变、原始数据的对象，类似于文件。它可以用来存储二进制数据，如文本、图像、音频或视频等。开发者可以使用 Blob 对象在客户端处理和操作这些数据，而无需与服务器交互。 citeturn0search1

blob: URL：blob: URL（或称对象 URL）是浏览器为特定的 Blob 或 File 对象生成的唯一标识符，形式如 blob:<origin>/<uuid>。例如，blob:http://localhost:5100/158db3da-850b-4303-9d5c-d1dd0446a297。这些 URL 仅在当前会话和页面中有效，不能在其他页面或浏览器实例中访问。 citeturn0search3

为什么使用 `blob:` URL？

在网页开发中，某些场景需要在客户端处理和显示本地或动态生成的数据，而不经过服务器：

本地文件预览：当用户在网页上选择本地文件（如图片）时，使用 blob: URL 可以在不上传文件的情况下，直接在页面上预览该文件。
动态生成内容的展示：对于在客户端生成的内容（如图表、截图），可以将其转换为 Blob，然后使用 blob: URL 在页面上展示或提供下载链接。
提高性能：避免将数据上传到服务器再下载，可以减少网络延迟，提高用户体验。

`blob:` URL 的工作原理

创建 Blob 对象：使用 Blob 构造函数创建一个包含所需数据的 Blob 对象。
生成 blob: URL：调用 URL.createObjectURL(blob) 方法，浏览器会为该 Blob 对象生成一个唯一的 blob: URL。
使用 blob: URL：将生成的 blob: URL 赋值给 HTML 元素的属性（如 <img> 的 src），即可在页面上显示或使用该数据。
释放资源：当不再需要该 blob: URL 时，调用 URL.revokeObjectURL(url) 方法，通知浏览器释放相关资源。 citeturn0search6

示例：在网页上预览本地图片

以下是一个使用 blob: URL 在网页上预览用户选择的本地图片的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片预览示例</title>
</head>
<body>
  <input type="file" id="fileInput" accept="image/*">
  <br>
  <img id="preview" src="" alt="图片预览" style="max-width: 500px; display: none;">
  
  <script>
    const fileInput = document.getElementById('fileInput');
    const preview = document.getElementById('preview');

    fileInput.addEventListener('change', function() {
      const file = this.files[0];
      if (file) {
        const blobUrl = URL.createObjectURL(file);
        preview.src = blobUrl;
        preview.style.display = 'block';

        // 可选：当图片加载完成后，释放 blob URL
        preview.onload = function() {
          URL.revokeObjectURL(blobUrl);
        };
      }
    });
  </script>
</body>
</html>

在上述示例中，当用户选择一张图片时，JavaScript 会为该图片文件创建一个 blob: URL，并将其设置为 <img> 标签的 src 属性，从而实现图片的本地预览。

注意事项

生命周期：blob: URL 的生命周期与创建它的文档相关联。当页面刷新或关闭时，这些 URL 会自动失效。 citeturn0search3
资源管理：尽管浏览器会在页面卸载时自动回收 blob: URL，但在单页应用（SPA）等长生命周期的应用中，建议在不再需要时手动调用 URL.revokeObjectURL(url) 释放资源，以避免内存泄漏。 citeturn0search4
安全性：blob: URL 仅在创建它们的源（origin）下有效，不能跨域使用，确保了数据的安全性。

通过理解和应用 blob: URL，开发者可以在客户端高效地处理和展示本地或动态生成的数据，提升用户体验并优化应用性能。

如果您希望进一步了解 Blob 和 blob: URL 的使用，以下视频提供了详细的讲解：

videoJavaScript 教程：理解和使用 Blob 与 Blob URLturn0search5