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。

列印頁面