JavaScript - Blob 对象

什么是 JavaScript 中的 Blob？

在 JavaScript 中，Blob 是一个对象，它是一组表示存储在文件中的数据的字节。我们可以很容易地将 Blob 对象的内容读取为 ArrayBuffer，因此它非常适合存储二进制数据。Blob 对象用于处理原始二进制数据，我们可以从纯文本、文件数据等创建它。

语法

用户可以按照以下语法使用 Blob() 构造函数来创建一个 Blob 对象。

new Blob(BlobContent, Options);

或

new Blob(BlobContent, {type: Type of the Blob content});

在上面的语法中，Blob() 构造函数接受两个参数并返回 Blob 对象的实例。开发人员可以根据 `BlobContent` 设置 'type' 选项的值。

参数

Blob() 构造函数接受两个参数，如下所示。

BlobContent - 它是一个文本、数据或文件内容。
Options - 它是一个可选对象，包含 BlobContent 的各种选项。

“type” 是 Options 对象中的一个重要属性。它包含 BlobContent 的 MIME 类型作为值。例如，要将纯文本存储在 blob 对象中，可以使用“text/plain”作为 MIME 类型；对于图像，可以使用“image/jpg”或“image/png”等。

示例

在下面的示例代码中，我们使用了 blob() 构造函数来创建一个 blob 对象。我们将字符串“Hello World！”作为第一个参数传递，并将内容的“text/plain”MIME 类型作为 blob() 构造函数的第二个参数传递。

之后，我们创建了 FileReader() 对象的实例，并使用 readAsText() 方法读取 blob 对象的内容。在输出中，我们可以看到它打印了纯文本，它是 blob 对象的内容。

<html>
<body>
   <h2> JavaScript - Blob Object </h2>
   <h3 id = "output"> </h3>
   <script>
      var data = "Hello World";
      var blob = new Blob([data], {
         type: 'text/plain'
      });

      // Using the fileReader object to read the blob
      var reader = new FileReader();
      reader.addEventListener("loadend", function (e) {
         var text = reader.result;
         document.getElementById("output").innerHTML = text;
      });
      // Start reading the blob as text
      reader.readAsText(blob);
   </script>
</body>
</html>

Blob URL

在上一节中，我们学习了如何使用 blob 对象。此外，我们还可以使用 blob 对象创建 URL。任何特定 URL 都引用本地文件系统中的文件，而 blob URL 则引用 blob 对象的内容。此外，我们还可以将 blob URL 作为带有 <a> 或 <img> 标签的实际 URL 使用。

让我们看下面的示例，了解如何从 blob 对象创建 URL。

示例：使用 Blob URL 呈现文本内容

在下面的示例中，我们创建了 blob 对象的实例并将文本内容作为参数传递。之后，我们使用 createObjectURL() 方法创建了一个 blob URL。

接下来，我们使用 blob URL 更新了 <a> 的“href”属性的值。在输出中，当您点击 URL 时，它会显示存储在 blob 对象中的内容。

<html>
<body>
   <h2> JavaScript - Blob URL </h2>
   <a href = "#" id = "download"> Download Text File </a>
   <script>
      // Creating file using Blob object
      var data = "This file contains the content of the blob object.";
      var blob = new Blob([data], {
         type: 'text/plain'
      });
      // Creating URL from Blob object
      var url = URL.createObjectURL(blob);
      var a = document.getElementById("download");
      // Updating the `href` attribute's value
      a.href = url;
   </script>
</body>
</html>

示例：使用 Blob URL 呈现图像

在此示例中，我们使用了文件输入来获取图像作为输入。每当用户上传图像时，我们都会使用文件内容创建 blob 对象。

之后，我们从 blob 对象创建一个 URL，并将其用作 <img> 标签的“src”属性的值，以在网页上呈现图像。

<html>
<body>
   <h2> JavaScript – Blob URL </h2>
   <h3> Upload image file </h3>
   <input type = "file" id = "fileInput" />
   <div id = "output"> </div>
   <script>
      // Read the file and create a blob
      document.getElementById('fileInput').addEventListener('change', function () {
         var file = this.files[0];
         var reader = new FileReader();
         reader.onload = function () {
            // Create a blob
            var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
            // Create an object URL
            var url = URL.createObjectURL(blob);
            // Set the object URL as the source of an image
            document.getElementById('output').innerHTML = '<img src="' + url + '" />';
        };
        reader.readAsArrayBuffer(file);
    });
</script>
</body>
</html>

Blob 的优缺点

以下是使用 blob 对象的一些优缺点。

优点

Blob 对象非常适合处理 Web 上的大型二进制数据文件。
开发人员可以通过使用 blob 对象分块获取数据，从而提高应用程序的性能。
Blob 对象可以与 File API 一起使用，在浏览器中执行文件操作。

缺点

大型 blob 对象会消耗大量内存和资源，这可能会影响应用程序的整体性能和使用体验。
使用 blob 对象处理二进制数据可能会给代码引入安全问题。
旧版浏览器不支持 blob。

打印页面